CODEWITHSUNDEEP
htmlcss
Emir Dupovac
Emir Dupovac

Reputation: 756

Make div overlays background image but not content

I'm trying to make div that overlays background image, but not content, like this:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 featured">
            <div class="overlay"></div> <!--optional-->
            <center>
                <img src="img/logo.svg">
                <h1>Title</h1>
            </center>                   
        </div>
    </div>
</div>

Where div featured has background image:

.featured {
    background-image: url(img/bg.jpg);
}

Now I've tried:

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.4);
}

And also:

.featured:before {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.4);
}

But it all makes overlay above content. Any better techniques?

Upvotes: 0

Views: 1573

Answers (2)

Brian John
Brian John

Reputation: 599

I was able to do it just by declaring a position and z-index on the <h1> and img elements

See my fiddle here: https://jsfiddle.net/LwwgLc0w/

Upvotes: 0

Sergey Sozonov
Sergey Sozonov

Reputation: 36

<div style="background: #f6f2ea url(images/file.jpg) no-repeat center center;
min-height: 50%; background-size:cover;">

            <div id="overlay-black">
            <div>
                <h3 class="bg-color">TEXT</h3>
            </div> 
            </div>
    </div>

and the css for overlay-black 

#overlay-black {
    background:rgba(50, 50, 50, 0.2);
    opacity:0;
    -webkit-transition: opacity .25s ease;
    opacity:100;
    height: 100%;
    width: 100%;
}

Upvotes: 1

Related Questions