How can I convert to greyscale the background image in CSS?

Question

I have an html section,

<div id="home">
    ...
</div>

and the following css applied,

  #home {
      background: url(../images/main.png) no-repeat center center fixed; 
      display: table;
      height: 100%;
      position: relative;
      width: 100%;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
       background-size: cover;
  }

My question is, how can I select the background image, which was set by CSS as background, so I can apply a filter? The only thing I want to do is to grayscale the background image. Which is the appropriate selector for a property?

Exact duplicate. Please, search before ask a question. – Marcos Pérez Gude Jul 08 '16 at 08:04 — Marcos Pérez Gude, Jul 08 '16 at 08:04

score -3 · Answer 1 · answered Jul 08 '16 at 08:05

-3

You have the background-image css property

background-image: url("test.gif");

answered Jul 08 '16 at 08:05

Charlie

22,886
11
59
90

How can I convert to greyscale the background image in CSS?

1 Answers1