CODEWITHSUNDEEP
javascriptjqueryhtmlcss
JohnQ
JohnQ

Reputation: 13

How do I place a background image above body's background image?

I have set a background image in body and in .wrap. My question is how do I place a background above all them? It is done with CSS however I didn't figure it yet.

I place all my code in http://jsfiddle.net/7sdnU/

Thank you.

<body>
    <div class="wrap">
    </div>
</body>

Upvotes: 0

Views: 257

Answers (2)

No Results Found
No Results Found

Reputation: 102864

The html element can also be styled, so you can shift the background layers back one element. Something like this:

html {
    background:url(bottom-background.png);
}
body {
    background:url(middle-background.png);
}
wrap {
    background:url(top-background.png);
}
/* Make sure everything takes up the whole viewport */
html, body, .wrap{
    height:100%;
    width:100%;
    padding:0; 
    margin:0; 
}

Demo: http://jsfiddle.net/7sdnU/15/

You could also just add another wrapper div:

<body>
    <div class="wrap">
        <div class="inner">
        </div>
    </div>
</body>

Then apply the "top" background to .inner

However, CSS3 allows multiple backgrounds, so you may want to have a look at that - that's best solution if you can use it, but it's not fully supported.

Upvotes: 1

Mathieu
Mathieu

Reputation: 3093

With z-index: http://jsfiddle.net/7sdnU/2/

Upvotes: 2

Related Questions