Putting the image behind the background

Question

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?

Answer 1

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

Answer 2

Give the image negative z-index:

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

Answer 3

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/