Background property of positioned container

fixed so body background can be used as 'loader'

[limbo]

I have a problem that is causing me a lot of bother...

The design specifies a fixed background image to be loaded in a container so that the content scrolls above it so that the photo does not need to be tiled - 100+ kb photos.

Looks great on paper, however, a file that large takes a while to load. So in the interim I thought I'd place a animated loader gif into the body background, but I am struggling to get the site to perform in the way I'd imagined...

CSS:

* {margin:0;}
html, body {height:100%;}
body {margin:0;padding:0;background:url(images/system/loader.gif) no-repeat;background-position:center 150px;text-align:center;}

#grip {
position:relative;
z-index:1;
min-height:100%;
height: auto !important;
height: 100%;
margin: 0 auto;
background-position:center top;background:url(images/bg/01.jpg) no-repeat #000;background-attachment:fixed;
}

#content {
width:960px;
z-index:2;
background:#ccc;
margin: 0 auto;
}

HTML:

<div id="grip"></div>

<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam sit amet lorem. Morbi quis tortor et nibh elementum sollicitudin. Nunc malesuada lacus quis tellus. Etiam iaculis, erat quis congue placerat, ante odio euismod urna, sit amet rhoncus neque arcu sed lectus.
</p>
</div>

The main problems I'm having are fixing background.jpg so it doesn't move... How can I position #grip so that #content rolls over the top...

Cheers, Liam

[JAB Creations]

Hi Liam,

Have you tried background-attachment: fixed/scroll; by any chance?

- John

[vincevincevince]

Essentially, have #grip behind #content (absolute positioning is fine for this); and make content 100%x100%, overflow auto; such that the natural page scroll-bar is in fact the scrollbar of #content. Hide the real one with a body {overflow:hidden}

[limbo]

Thanks chaps

I'll have a punt

[limbo]

Interstingly vince, your method worked pretty well, but I struggled to get it to work in IE6 - who'd have thunk it :o ?

I tried another method tipped by a friend and applied the BG loader image to the HTML tag - works great for pages with vertical scroll—to correct pages without enough content I used an inconsequential image preloader and positioned it off the bottom of the page, like so:

html {
background:url(../images/system/loader.gif) no-repeat #000;
background-position:center 150px;
}
body {
margin:0;
padding:0;
background:url(../images/bg/bg.jpg) no-repeat;
background-position:center top;
background-attachment:fixed;
}
#preloader {
visbility:hidden;
position:absolute;
top:0;
bottom:-0.1px;
height:1px;
width:1px;
z-index:-1;
}