Multiple background images - scrolling problem

I have a background image set for the body and another one set for #page, which should just act as a wrapper to hold this second image.
Here is the CSS:

html, body {
margin:0;
padding:0;
background-color: #000000;
background-image: url(…/img/bodybg2.jpg);
background-repeat: no-repeat;
background-position: right top;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 95%;
}

#page {
position:absolute;
left:0;
top:0;
padding:0;
margin: 0;
background: url(…/img/grid4.gif) repeat;
width: 100%;
height: 100%;
}

The issue is that the background image in #page only fills the window viewport. if you expand the size of the window, the background grows with it; however, if the window is small and you scroll within it before resizing, you see that the background image stops at the size of the viewport.

(I tried adding the following hack, but it did not change anything)
html>body {min-height: 100%; height: auto;}

Here is a link to the page, under construction:
http://www.itp.uzh.ch/~suzanne/bensite/index.html

Thank you!

Hi, you set a percentage height of 100%, which means #page will only show the background at 100% of the viewport height (in this case since the parent is the html/body)

When you scroll down, that’s 100% + hte other space.

If you don’t set a height then it should encompass the entire page :slight_smile:

Hi,
Thanks for the suggestion, but as a matter of fact, if I don’t set a height, the grid it doesn’t show up at all…
That’s because #page is just a wrapper and has no content of it’s own (?)
I can set a fixed height, of course, for the case of a large monitor/high resolution, but that’s a bad solution and also causes the scroll bar to lead down all the way to the bottom (the height defined in px).

I think this has to do with I the div positioned absolutely (which if I take away also makes the grid disappear). I’m confused by the whole thing but I think there must be a solution?

Thanks for any comments or suggestions!

Hi, that’s because there probably isn’t anything in it, as you just said.

Instead of having the #page be an empty wrapper, could you wrap that element around the page content? That would be a feasible solution (you should lose the AP also if you do that) :slight_smile:

ohhhh :frowning: I don’t get what you mean?
The site is a bit complicated (trying to make it exactly how my bf wants…) :wink:
There are several ap divs, including the one that holds the content on each page. i don’t know how to ‘wrap’ the element around it in another way?
Could you explain or maybe give me an example? That would be really nice :wink:
Thanks-

Alot of AP eleements eh? Say you have this
(Note that I’m referring to the element #page as <page> and the content div as <content>)


<page></page>
<content>All content here</content>

Now you could renest, aka

<page>
<content>All content is here</content>
</page



You shouldn't have that much AP on a page anyway. I'd lose the absolute positioning and if you need something done and you're thinking absolute position, come back here and ask how we would do it.

Absolute position should be used sparingly and only for small design segments :)

…but i’m doing that already…
<body>
<div id=“page”>
<div id=“box1”></div>
<div id=“title” class=“titleHome”></div>
<div class=“navi” id=“navi2”>
<a href=“index.html” id=“navi_home”>About</a>
<a href=“research.html” id=“navi_research”>Research</a>
<a href=“thoughts.html” id=“navi_thoughts”>Thoughts</a>
<a href=“writing.html” id=“navi_writing”>Writing</a>
<a href=“images.html” id=“navi_images”>Images</a>
<a href=“news.html” id=“navi_news”>News</a>
<a href=“games.html” id=“navi_games”>Games</a>
<a href=“separata.html” id=“navi_separata”>Separata</a>
</div>

<div id=“content” class=“generalcontent”>
<p>content here…</p>
</div>
</div>
</body>

I know what you’re saying about absolute positioning… but I’m just trying to make it work with that freaking grid he insists upon it and everything fitting right in to it.
I have done a lot of research and found that ap was probably the best way to go for this, maybe I’m wrong… but I have a very insistent “client” anyway.
:wink:
Thank you for your time in any case.
Cheers,

Why would I think that :)? You say this, implying that it’s an empty element

;).
Could you post a link to the page where this is at? It’d be much easier to give you an exact fix.

here’s the link again!
(is at the bottom of my first post)
Sorry… I meant no contwent like paragraphs and stuff that would cause the background to display automatically.
http://www.itp.uzh.ch/~suzanne/bensite/index.html

Thank you Ryan!

Well this will be just about impossible (not saying iimpossible b ecause as previous CSS quizzes in this forum has shown, not everything is impossible) because it just will be lol. Everything inside #page is absoltuely positioned. That means no other elements even recognzie it’s there. Nothing. Every element acts individually. That means #page thinks it’s empty. Which means it can’t go as high as the content.

You’d need to rework to floats as I suggested earlier ;).

OK! I got you.
I’m going to try.
Thanks for your input… I might come looking for you again :wink:
Cheers,
suzanne

You’re welcome :).

Just remember, stay away from absolute positioning for layouts, use it for small design segments. Float it instead :). Just remember that.

Hey Ryan,
Have to thank you again. I started a new stylesheet from scratch, taking your suggestion to use floats and only positioning what was absolutely necessary as absolute :wink:
…and voilà, it works - no more problems with that grid :wink:
http://www.itp.uzh.ch/~suzanne/bensite/index.html

Cheers,
suzanne

Gld ypu got it working (with no bugs either! (good job):))