CODEWITHSUNDEEP
htmlcss
Brian
Brian

Reputation: 315

Multiple Full Size Background Image

So I have learned the different methods of setting up a background image that will automatically fill the browser. Is there a method using only html and css to set a fullscreen background image and then have another fullscreen background image below so that when I initially launch the site you will see the first image and as you scroll down the second one will appear?

Upvotes: 1

Views: 2314

Answers (2)

apaul
apaul

Reputation: 16170

You could do it like this:

Working Example

html {
    height:1200px;
    width:600px
}
body {
    height:100%;
    width:100%;
    background: url(http://example.png) no-repeat 50% 600px/600px, url(http://example2.png) no-repeat top/600px 600px;
}

Or, if it needs to be fluid, like this:

Working Example 2

body, html {
    height:100%;
    width:100%;
    margin:0;
}
#div1 {
    height:100%;
    width:100%;
    background: url(http://example.png) no-repeat 50%/cover;
}
#div2 {
    height:100%;
    width:100%;
    background: url(http://example2.png) no-repeat 50%/cover;
}

Upvotes: 2

user2557171
user2557171

Reputation: 11

CSS3 allows this sort of thing and it looks like this:

body {
background-image: url(images/bgtop.png), url(images/bg.png);
background-repeat: repeat-x, repeat;
}

The current versions of all the major browsers now support it, however if you need to support IE8 or below, then the best way you can work around it is to have extra divs:

<body>
<div id="bgTopDiv">
    content here
</div>
</body>
body{
background-image: url(images/bg.png);
}
#bgTopDiv{
background-image: url(images/bgTop.png);
background-repeat: repeat-x;
}

Upvotes: 0

Related Questions