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

Question

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

Possible duplicate of [Greyscale Background Css Images](http://stackoverflow.com/questions/16340159/greyscale-background-css-images) — Robert, Jul 06 '16 at 16:45

score 0 · Accepted Answer · edited May 23 '17 at 10:28

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.

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

1 Answers1

Source