0

I was wondering how it could be possible to set multiple background one below the other that cover the whole site. I mean something like this: http://us.battle.net/d3/en/reaper-of-souls/

I simplay couldn't find a solution yet but it actually seems so simple :(

Krasavchiki
  • 9
  • 2

3 Answers3

1

demo

You can use the background: background1, background2, ...; property to display 2 backgrounds on top of each other. Here I used 2 PNGs as background on top of each other. They look weird because I used size 100% 100%

CSS

body {
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 700px;
    background: url('http://fc08.deviantart.net/fs71/i/2013/082/a/c/png_grass_by_moonglowlilly-d5z1o5t.png') left top/100% 100% no-repeat,
        url('http://th05.deviantart.net/fs70/PRE/f/2013/120/7/b/png_monsters_inc_by_upinflames12-d63nx7i.png') left top/100% 100% no-repeat;
}
Community
  • 1
  • 1
Sourabh
  • 8,243
  • 10
  • 52
  • 98
  • Thanks, but how can I add and positionate text on each picture? – Krasavchiki Nov 26 '13 at 05:56
  • What so you mean by `each` picture? You can write anything inside a `p` tag and style it, it'll be over the body and thus over the background (the 2 images) of body. Something like this: http://jsfiddle.net/U8LLG/1/show/ – Sourabh Nov 26 '13 at 06:00
  • Well the title of that website is another image in a container `h1` and the container is centered inside its own container. The FX you see are done using `video` tag. The best way to know how that website is working is to dive into its source. – Sourabh Nov 26 '13 at 06:09
  • I speak of the parts below the video header, I just need to know how to place pictures one below the other and then add and positionate text on it. – Krasavchiki Nov 26 '13 at 06:13
  • Something like this? http://jsfiddle.net/U8LLG/2/show/ If you want to add another picture in background, you can add another background in `background` property – Sourabh Nov 26 '13 at 06:36
  • http://stackoverflow.com/questions/1204275/what-does-an-asterisk-do-in-a-css-selector – Sourabh Nov 26 '13 at 09:05
0

try creating several divisions, one on top of the other on position absolute or fixed, width:100% height:100%, each division with its own background, you will need to make the html and body 100%:

CSS:

html, body{
   height:100%
}

#div1{
 width:100%;
 height:100%;
 position:absolute;
 top:0;
 left:0;
 z-index:-1;
 background:(your background properties)
}

#div2{
 width:100%;
 height:100%;
 position:absolute;
 top:0;
 left:0;
 z-index:-2;
 background:(your background properties)
}

#div3{
 width:100%;
 height:100%;
 position:absolute;
 top:0;
 left:0;
 z-index:-3;
 background:(your background properties)
}

HTML:

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

For them to appear on top of each other they will need to be transparent pngs or have opacities. You can also add a background to the body to add another layer

multimediaxp
  • 9,348
  • 13
  • 49
  • 80
0

To acheive this, what I have done till now and what I know is, there is no possible way to add two backgrounds as of now. So, I make two div say header and footer, then I apply the background over it. And possibly a third div to form a body. Setting the CSS position to absolute you can easily acheive an overlapping look.

<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>

For CSS you can have this.

#header, #body, #footer
{
    background: url("img1.jpg");
    position: absolute;
}

Most of the website do this.

Try this. This might work for you.

<style>
body
{
    margin: 0px;
}
div
{
    height: 33.3%;
}
#header
{
        background: url("1.jpg");
}
#footer
{
    background: url("2.jpg");
}
#body
{
        background: url("3.jpg");
}
</style>
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
Veer Shrivastav
  • 5,434
  • 11
  • 53
  • 83