1

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?

Brian
  • 315
  • 3
  • 7
  • 12
  • 1
    do you mine share some pieces of codes? – Ahmed Ali Jul 06 '13 at 23:36
  • html { background: url("http://i.imgur.com/XHbch.jpg") no-repeat center center fixed;} – Brian Jul 06 '13 at 23:38
  • All I really know what to do at this point is to set up the one background image. I was thinking of setting up two
    and applying a background to each div. Would that approach work?
     – Brian Jul 06 '13 at 23:39
  • try `background: url('banner1.jpg'), url('banner2.jpg'); background-position: left top, left top; background-repeat: no-repeat, repeat;` Play with background-position until it does what you want. IE < 9 does not support this feature. thanks to [this](http://stackoverflow.com/questions/11821285/css-two-background-images) question. – Ahmed Ali Jul 06 '13 at 23:42

2 Answers2

2

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;
}
apaul
  • 16,092
  • 8
  • 47
  • 82
0

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;
}
user2557171
  • 11
  • 1