I am currently working on a website that features a fixed background image with scrollable elements on top. I am facing an issue where applying a grayscale filter to the image also affects the text within the container, turning it gray as well. However, I only want the image to have the grayscale effect, not the text. How can I solve this problem?
Here is the Bootstrap code snippet:
<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>
And here is the CSS code snippet:
.fixed-background {
background-image: url("img/background.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center;
min-height: 100vh;
filter: grayscale(100%);
}
I found a workaround using z-index to solve the issue, as suggested by @Hibrit Usta:
<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
}