CODEWITHSUNDEEP
htmlcssz-index
Nick Ginanto
Nick Ginanto

Reputation: 32140

Putting the image behind the background

I have a simple html, but I'm not sure if what I want to do (the way I want to do it) is possible..

<div class="container">
  <img src="..." />
</div>

.container has some sort of gradient background, in this case a common black bottom for text

background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 65%, rgba(47, 39, 39, 0.7));

this is simulated in http://jsfiddle.net/9WQL6/

I want the dark bottom to be in front of the picture, not behind it.

I can't use a background-image for the image because the css is precompiled.

Is this possible?

Upvotes: 1

Views: 71

Answers (3)

Maartje
Maartje

Reputation: 688

You can do this by adding a diffrent div in your container and apply the gradient on that div. The image will be in .container. You put the containerdiv on position relative and the gradientdiv on absolute and make it the same width and height as the containerdiv.

In my example I gave the gradientdiv the class gradient

<div class="container">
    <div class="gradient">
    </div>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/800px-Smiley.svg.png" />
</div>

example: http://jsfiddle.net/9WQL6/9/

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115108

Another way to go is with a pseudo-element (IE8+)

JSfiddle Demo

CSS

.container{
    max-width: 200px;
    border: 1px solid black;
    position: relative;
}

.container img{
    max-width: 200px;
}

.container:after {
    position: absolute;
    content:" ";
    top:0;
    left:0;
    height:100%;
    width:100%;
    background: -webkit-gradient(top, from(rgba(255, 255, 255, 0)), color-stop(0.65, rgba(255, 255, 255, 0.7)), color-stop(1, rgba(47, 39, 39, 0.5)));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 65%, rgba(47, 39, 39, 0.7));
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 65%, rgba(47, 39, 39, 0.7));
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 65%, rgba(47, 39, 39, 0.7));
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 65%, rgba(47, 39, 39, 0.7));
    background: linear-gradient(top, rgba(255, 255, 255, 0) 65%, rgba(47, 39, 39, 0.7));
}

Upvotes: 2

matewka
matewka

Reputation: 10148

Give the image negative z-index:

.container > img {
    position: relative;
    z-index: -1;
}

Upvotes: 1

Related Questions