How to apply css filters to fixed background image

Question

Im doing a website, and there is a fixed background image, and above this image there are some scrollable element. I want to apply a grayscale filter on the image, it works, but unfortunately this filter is applied also to the container text, so also the text is gray, but i dont want that. I wan only that the image has a grayscale, not the above element. How can solve this problem?

This is bootstrap code:

    <section id="section-toTheTop"
    class="jumbotron jumbotron-fluid fixed-background d-flex justify-content-center align-items-center">
    <div class="container text-center">
        <h1 class="display-1 text-primary">PHOTOSERVICE</h1>
        <p class="display-4 d-none d-sm-block text-white">Capture every moment</p>
        <p class="lead text-white">Create stunning photos and videos by using the built-in features for enhancement.</p>
        <p class="lead text-white">Share your best shots with your friends and the rest of the world instantly.</p>
        <p><strong class="text-white">Download now on:</strong></p>
        <a href="#" class="btn btn-primary btn-lg"><i class="fab fa-fw fa-apple"></i> App Store</a>
        <a href="#" class="btn btn-primary btn-lg"><i class="fab fa-fw fa-google-play"></i> Play Store</a>
     </div>
     </section>

This is css code:

 .fixed-background {
  background-image: url("img/background.jpg");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  min-height: 100vh;
  filter: grayscale(100%);
}

@Hibrit Usta, at the end, playing with z-index, i used this trick:

<div class="overlay"></div>
<section id="section-toTheTop"
    class="jumbotron jumbotron-fluid fixed-background d-flex justify-content-center align-items-center">
    <div class="container text-center text-over-image">
        <h1 class="display-1 text-primary">PHOTOSERVICE</h1>
        <p class="display-4 d-none d-sm-block text-white">Capture every moment</p>
        <p class="lead text-white">Create stunning photos and videos by using the built-in features for enhancement.</p>
        <p class="lead text-white">Share your best shots with your friends and the rest of the world instantly.</p>
        <p><strong class="text-white">Download now on:</strong></p>
        <a href="#" class="btn btn-primary btn-lg"><i class="fab fa-fw fa-apple"></i> App Store</a>
        <a href="#" class="btn btn-primary btn-lg"><i class="fab fa-fw fa-google-play"></i> Play Store</a>
    </div>
</section>



.fixed-background {
    background-image: url("img/background.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    min-height: 100vh;
}

.overlay {
    position: absolute;
    min-height: 100%;
    min-width: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.75);
}
.text-over-image {
    z-index: 0
}

Mustafa · Accepted Answer · 2020-03-28T18:06:40.300

You can try the code below.

    .fixed-background {
        position: relative;
    }
    
    .fixed-background::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("https://i.picsum.photos/id/237/1600/1600.jpg");
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        min-height: 100vh;
        filter: grayscale(100%);
    }
  .fixed-background  .container {
        position: relative;
    }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
    <section id="section-toTheTop"
    class="jumbotron jumbotron-fluid fixed-background d-flex justify-content-center align-items-center">
    <div class="container text-center">
        <h1 class="display-1 text-primary">PHOTOSERVICE</h1>
        <p class="display-4 d-none d-sm-block text-white">Capture every moment</p>
        <p class="lead text-white">Create stunning photos and videos by using the built-in features for enhancement.</p>
        <p class="lead text-white">Share your best shots with your friends and the rest of the world instantly.</p>
        <p><strong class="text-white">Download now on:</strong></p>
        <a href="#" class="btn btn-primary btn-lg"><i class="fab fa-fw fa-apple"></i> App Store</a>
        <a href="#" class="btn btn-primary btn-lg"><i class="fab fa-fw fa-google-play"></i> Play Store</a>
     </div>
     </section>

Another solution:

    .bg-fixed {
        background-image: url("https://i.picsum.photos/id/237/1600/1600.jpg");
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        min-height: 100vh;
        filter: grayscale(100%);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -99;
    }
    
    .jumbotron {
        background-color: transparent!important;
    }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
  <section class="bg-fixed">

    </section>

    <section id="section-toTheTop" class="jumbotron jumbotron-fluid fixed-background d-flex justify-content-center align-items-center">
        <div class="container text-center">
            <h1 class="display-1 text-primary">PHOTOSERVICE</h1>
            <p class="display-4 d-none d-sm-block text-white">Capture every moment</p>
            <p class="lead text-white">Create stunning photos and videos by using the built-in features for enhancement.</p>
            <p class="lead text-white">Share your best shots with your friends and the rest of the world instantly.</p>
            <p><strong class="text-white">Download now on:</strong></p>
            <a href="#" class="btn btn-primary btn-lg"><i class="fab fa-fw fa-apple"></i> App Store</a>
            <a href="#" class="btn btn-primary btn-lg"><i class="fab fa-fw fa-google-play"></i> Play Store</a>
        </div>
    </section>

Thank you it works, i will use your trick. But by chance are there other ways? Because im not very comfortable with css, i know just only css basics at the moment. — Riccardo, Mar 28 '20 at 17:47
Ok seems more easy. Thank you. But it mess up the other code below of the page. Maybe i should use your first example. Another solution can be photoshop — Riccardo, Mar 28 '20 at 18:15

How to apply css filters to fixed background image

1 Answers1