Issue with background color

Hello everyone,

I have 2 little questions.

– I have a little issue when I change the color of the background of my website with the following code

body,
.excerpt,
.main,
.menu-primary ul,
#site-header {
	background: #000;
}

It also change the background of the posts on the main page of the website on mobile version. Do you know how I can fix that ?

– Second question : I would like to display like a purple filter with low opacity on the featured images on the main page (which is set as blog archives), and I want the filter to disapear when you have your mouse on it with a smooth transition (just like the hover effect displayed on liks, etc…à, I don’t know if it’s clear haha.

Is it possible to do ?

Thanks a lot ??

The page I need help with: [log in to see the link]