CSS background image opacity

Question

I'm currently working on a project and need help setting the CSS background image opacity without effecting the text that is overlaying the image.

When the opacity is set, It is effecting the title and description which effects the look of text.

I've attached an image for reference.

*The hero Image is hardcoded for reference *

Also, I can't set the opacity on the image by editing it as the images will be coming from an API

.hero {
    width: 100%;
    height: 450px;
    background-color: #222222;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 1000;
    padding: 20px 50px;
    gap: 50px;
    background-image: url('../images/elvis.jpeg');
    opacity: 50%;
}

.hero-img {
    max-width: 100%;
    max-height: 200px;
    object-fit: cover;
    padding-top: 20px;
}

.movie-details {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

h1 {
    padding-top: 20px;
    font-size: 20px;
}

p {
    font-size: 14px;
}

 <div className="hero">

        <div className="movie-details">
            <h1>{selectMovie.original_title}</h1>
            <p>{selectMovie.overview}</p> 
        </div>
        
    </div>

score 0 · Answer 1 · answered Sep 13 '22 at 17:47

0

just use 3 divs. Parent with position: relative. And two children. First with position: absolute and background image, second with text

answered Sep 13 '22 at 17:47

Gibloor

143
6

score 0 · Answer 2 · answered Sep 13 '22 at 18:01

you can put the image on the ::before psudeo

.hero {
        width: 100%;
        height: 450px;
        background-color: #222222;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        z-index: 1000;
        padding: 20px 50px;
        gap: 50px;
        opacity: 100%;

    }

    .hero::before {
        content: "";
        position: absolute;
        z-index: -1;
        opacity:30%;
        width: 100%;
        height: 450px;
        background: url("https://images.unsplash.com/photo-1663009891740-a1e0dd992c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2110&q=80");
    }

    .hero-img {
        max-width: 100%;
        max-height: 200px;
        object-fit: cover;
        padding-top: 20px;
    }

    .movie-details {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    h1 {
        padding-top: 20px;
        font-size: 20px;
        color:white;
    }

    p {
        font-size: 14px;
        color:white;
    }

<div class="hero">
        <div class="movie-details">
            <h1>{selectMovie.original_title}</h1>
            <p>{selectMovie.overview}</p> 
        </div>
        
    </div>

CSS background image opacity

2 Answers2