CODEWITHSUNDEEP
htmlcss
Adamo
Adamo

Reputation: 119

background image grayscale

I for background on my website I use colors and at top I have an image. I want to make this image black and white with css:

body {
    background: url('background.jpg') center top no-repeat;
    -webkit-filter: grayscale(100%);
}

but this code make whole site grayscale

I also tried to put site content to new div with style -webkit-filter: none; but it don't work neither.

Upvotes: 6

Views: 4739

Answers (3)

michal.jakubeczy
michal.jakubeczy

Reputation: 9469

There's another solution without using an overlay div using background-blend-mode.

This is supported among all major browsers https://caniuse.com/?search=background-blend-mode (except IE)

background-color: rgba(255,255,255,1);
background: url('background.jpg') center top no-repeat;
background-blend-mode: luminosity;

Upvotes: 3

Kaj Risberg
Kaj Risberg

Reputation: 645

This is block style in jsx syntax (from reactjs-application). I have no clue what is going on there, but it seems to work

            style={{
                minHeight: '100vh',
                backgroundPosition: 'center',
                backgroundSize: 'cover',
                backgroundImage:"linear-gradient(black, black), url('images/bgimage.jpg')",
                backgroundBlendMode: 'saturation'
            }}

Upvotes: -2

Cybersupernova
Cybersupernova

Reputation: 1839

you can try a different div overlayed over <body> like this

#overlay {
    background: url('background.jpg') center top no-repeat;
    -webkit-filter: grayscale(100%);
    z-index: -1;
    opacity: 0.5; /*make it as your requirement*/
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

and your html will look like

<body>
    <div id="overlay"></div>
    <!-- other body elements -->
</body>

Upvotes: 1

Related Questions