CODEWITHSUNDEEP
htmlcssoverlayopacity
unsafe_where_true
unsafe_where_true

Reputation: 6300

image with gradient overlay, but text should be on front (no opacity)

The design I need to implement has an image (which I put as div background-image), on top of that image there's a gradient overlay with some degree of opacity, and on top of that there would be some text, which should be white and in front (opacity 1).

I can't manage to bring the text to the front. Can this be done? I've also tried putting different z-indexes, but no matter what z-index the text appears opaque as well.

<div class="background">
 <div class="blue-gradient opaque">
   <div class="page-title-div front">
     <h1>This text goes to front and is white</h1>
   </div>
 </div>
</div>

css:

.background {
  background-image: url('../img/back.png');
}
.blue-gradient {
  background-image: radial-gradient(circle farthest-corner at center, #15497E 0%, #3D93BC 100%);
}
.opaque {
  opacity: 0.7;
}
.front{
  opacity: 1;
}

Upvotes: 0

Views: 5848

Answers (1)

David Hariri
David Hariri

Reputation: 989

Solution is to properly nest the elements and using position tags. 

<div class="background">
    <div class="blue-gradient"></div>    
    <h1>This text goes to front and is white</h1>
</div>

CSS

.background {
    position: absolute;
    height: 100%;
    width: 100%;
    display: block;
    background-image: url('http://jasonlefkowitz.net/wp-content/uploads/2013/07/Cute-Cats-cats-33440930-1280-800.jpg');
}
.blue-gradient {
    width:100%;
    height: 100%;
    position:absolute;
    opacity: 0.7;
    background-image: radial-gradient(circle farthest-corner at center, #15497E 0%, #3D93BC 100%);
}
h1 {
    position:relative;
    color:#fff;
}

Fiddle: http://jsfiddle.net/9tN35/

Upvotes: 4

Related Questions