CSS adjust brightness of image background and not content
11,345
You can add a new element of transparent black that overlays just the background, with the contents of your div sitting in front of it.
<div id="section1">
<div id="content">
</div>
</div>
CSS:
#section1 {
background: url('../images/headerimage1.jpg') center center no-repeat;
background-size: cover;
position: relative;
}
#content {
position: absolute;
}
#section1::before {
content: '';
display: block;
position: absolute;
background-color: #000;
opacity: 0.5;
width: 100%;
height: 100%;
}
Author by
jon220
Updated on June 09, 2022Comments
-
jon220 almost 2 years
The section has a background image with content on top. I want to decrease the brightness of only the background image in the section and not the content.
I have tried the below, however, the brightness still applies to all and not just the image.
<!-- Section --> <div id="section1"> <div id="content"> <h1 class="heading">headline text</h1> <h4 class="subHeading"> Sub-headline text</h4> <!-- Call to action button --> <br><br> <button> Join our wait list </button> </div>
#section1 { background: url('../images/headerimage1.jpg') center center no-repeat; background-size: cover; -webkit-filter: brightness(0.5); filter: brightness(0.5); padding-top: 100px; padding-bottom: 100px; padding-left: 10%; padding-right: 10%; color: white; text-align: center; } #content { -webkit-filter: brightness(1); filter: brightness(1); }
-
jon220 about 8 yearsthanks for the suggestion, but the brightness does not seem to apply to the background
-
Mike Jerred about 8 yearssorry I made a mistake when I first wrote, I've since edited it and added in the
position: absolute
-
jon220 about 8 yearsone quick suggestion. How would i be able to center the content. text-align:center or margin: 0 auto; doesnt seem to work
-
Mike Jerred about 8 yearsyou will probably need to make sure your content div has the same width as the parent, since it is positioned absolutely now.
width: 100%
should work