Background Height 100%

HTML & CSS
1

I’m having trouble getting my background image on this site to stretch the whole page. At first I couldn’t get it to extend past the container, so I added “html, body {height:100%}” which seemed to work (as you can see now). The trouble is if you go to one of the longer pages that you have to scroll down on, when you scroll (at least on FF), you notice the background doesn’t strech to the bottom.

Am I missing something obvious?

2

When you set the html and body height to 100%, it means 100% screen height, not content height - as the background is locked to the bottom of body, it cannot go lower than the bottom of the screen.

As I mentioned in the other thread, a minimum 100% wrapper will do this job. Add another overall wrapper div to the site :

[COLOR="Red"]<div id="wrapper">[/COLOR]
<div id="container">

<div id="leftcol">
.
.
.
<a href="mailto:Inquiry@Saharafire.com">Inquiry@Saharafire.com</a></p>

</div>
</div>
[COLOR="Red"]</div>[/COLOR]

and then set this to a minimum height and apply the background to this. The #container will need the overflow set to surround the floats, and the old * html #container rule should be removed :

body {
	margin:0; padding:0;
	font: 13px Georgia, "Times New Roman", serif;
	color: #000;
	text-align:center;
	height:100%;
}
[COLOR="Red"]#wrapper {
	min-height: 100%;
	background: #fff url(i/treebg1.jpg) left bottom no-repeat;
}
* html #wrapper {
	height: 100%;
}[/COLOR]
#container {
	margin:0px 30px 30px 290px; padding:0;
	width: 450px;
	text-align: left;
	background: #fff url(i/cc.jpg) right top no-repeat;
	[COLOR="Red"]overflow: hidden;[/COLOR]
}
3

Thanks for the input! I actually tried that (I copied and pasted it in, so no changes to what you did), and we’re back to the old problem of the treebg not extending to the bottom of the page.

Any other ideas?

4

That is because you also removed the 100% height on html - that has to stay

html {
  height: 100%;
}
5

awesome, thanks!