Question

I have a div and an image inside it as a background:

<div id="background">
    <img src="background.png" class="stretch" alt="" />
    <div class="header">
    <span>header</span>
    </div>  
    <div class="picture">
    <img src="pic" alt="" />
    </div>
</div>

And the following css:

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:100%;
}

.header {
    position: absolute;
    left: 12px;
    top: 18px;
    font-family: Arial;
    font-size: 14pt;
    color: #3A4549;
    margin-bottom: 
}

here’s a fiddle: http://jsfiddle.net/3j7vk/

How can I add the image right under the header without specifying an absolute position?
Right now it goes under the background image. Thanks!

Answer 1

Is this what you’re after?

http://jsfiddle.net/3j7vk/1/