Css Adjust Brightness Of Image Background And Not Content

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, h

Solution 1:

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%;
}