Black and White background CSS

Question

I have a background image on the <body> block.

I want to make it black and white by using the webkit-filter: grayscale(100%);

But when I'm applying this filter to the body block, all the images on my site becomes black and white too. I want only my background to be black and white. How can I do it?

score 0 · Accepted Answer · edited May 23 '17 at 11:57

0

Insert an absolutely positioned div and apply the background to that.

<body>
<div id="BG"></div>
....
other code here
....
</body>


#BG{
   position:fixed;
   left:0;
   right:0;
   top:0;
   bottom:0;
   background-image:(yourimage);
   webkit-filter: grayscale(100%);
   z-index:-500;
}

Fiddle: http://jsfiddle.net/m5d5w/6/

Don't forget to add filters for non-webkit browsers too. See: Greyscale Background Css Images

edited May 23 '17 at 11:57

Community

1
1

answered Jun 15 '14 at 06:33

Nick

10,904
10
49
78

Do you you need to set the z-index for this? Where will the image show up? Behind the text? – Simcha Khabinsky Jun 15 '14 at 06:35
This solution will prevent text-selection on this page. – Simcha Khabinsky Jun 15 '14 at 06:37
I have fixed background. If I set position: absolute, background won't be fixed.. – user3724896 Jun 15 '14 at 06:38
What about `position:fixed` on the background div? – Nick Jun 15 '14 at 06:38
Thanks!! Helped. With position: fixed all works fine! – user3724896 Jun 15 '14 at 06:47

Black and White background CSS

1 Answers1