Fjoni Yzeiri Fjoni Yzeiri - 4 months ago 47
CSS Question

How can I make the background color of the body black and white

I want to change the color of my body and I want to make it black and white. This the code that I am using at the moment:

font-family: Montserrat, sans-serif;
background-image: url("http://vlr.tynt.com/?format=txt&key=284d869ffe43382ebe88a02cabb697ab&u=http%3A%2F%2Ft.wallpaperweb.org%2Fwallpaper%2Fnature%2F1920x1080%2FPacific_Sunset_Pismo_Beach_California.jpg&subId=cyfIqK8eur4kvOacwqm_6r&txt=&loc=http%3A%2F%2Fwallpaperweb.org%2Fwallpaper%2Fnature%2Fpacific-sunset-pismo-beach-california_40871.htm&ref=https%3A%2F%2Fwww.google.al%2F&title=Nature%3A%20Pacific%20Sunset%2C%20Pismo%20Beach%2C%20California%2C%20desktop%20wallpaper%20nr.%2040871");
color: white;
filter: grayscale(100%);
-webkit-filter: grayscale(90%);


I have googled a lot but the websites show me the image when it is like a random image in the body not as a background image

Answer

You can't use a filter on the body background, however there's a hacky way to do it using the :before pseudo selector like so:

body {
  font-family: Montserrat, sans-serif;
  color: white;
  margin:0;
  padding:0;
}
  body:before {
    content: "";
    background: url("http://vlr.tynt.com/?format=txt&key=284d869ffe43382ebe88a02cabb697ab&u=http%3A%2F%2Ft.wallpaperweb.org%2Fwallpaper%2Fnature%2F1920x1080%2FPacific_Sunset_Pismo_Beach_California.jpg&subId=cyfIqK8eur4kvOacwqm_6r&txt=&loc=http%3A%2F%2Fwallpaperweb.org%2Fwallpaper%2Fnature%2Fpacific-sunset-pismo-beach-california_40871.htm&ref=https%3A%2F%2Fwww.google.al%2F&title=Nature%3A%20Pacific%20Sunset%2C%20Pismo%20Beach%2C%20California%2C%20desktop%20wallpaper%20nr.%2040871");
    background-size: cover;
    position: absolute;
    height:100%;
    width:100%;
    z-index: -1;
    filter: grayscale(100%);
    -webkit-filter: grayscale(90%);
  }

Note that this solution does not support IE or Edge.

Another solution would be to create an element with the filter applied and use absolute positioning to put it behind the content.

Source

Comments