Layering Backgrounds at 100% Height

**pinheadj** · Dec 28, 2005 16:38

I've made a simplified version of the problem I'm having (code below.)

Basically, I want to have a repeating texture for the main page background, but with a wide white strip going down the middle (in this case as the background of a wrapper div.) When I try this (as below) however, it works fine until there is enough content (or the browser window is short enouh) that the page scrolls in which case the white strip dissapears under content scrolled into view.

Any ideas?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>background test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<style type="text/css">
		
			html, body {
				margin: 0;
				padding: 0;
				height: 100%;
			}
			
			body {
				background: #ccc url(bg.jpg);
			}
			
			#wrapper {
				width: 758px;
				height: 100%;
				margin: 0 auto;
				background: #fff;
			}
			
			#content {
				height: 400px;
				width: 400px;
				border: 1px dotted #900;
			}
			
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div id="content">
				make browser window shorter than this box to scroll
			</div>
		</div>
	</body>
</html>

**all4nerds** · Dec 28, 2005 16:56

Hello

Not enough to go on? did you use html,body{height:100%;} ?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	<title>background test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<style type="text/css">
	html,body{/*html for FF Moz NS7 OP */
	text-align:center; /*IE 5 IE 5.5*/
	margin:0;/* no margins body */
	padding:0;/* no padding body */
	height:100%;
	width:100%;
	}
	body{background:#ff8c00;}
	
	div{text-align:left;/* to get text back to the left*/}
			
	#wrapper{
	background: url(3.jpg) 50% 0 repeat-y;
	width: 758px;
	margin: 0 auto;
	/*background:#eee8aa;*/
	}
	* html #wrapper{height:100%;}/* IE */
	head+body #wrapper{min-height:100%;}/* FF NS Moz OP */
			
	#content{
	background: url(3.jpg) 50% 0 repeat-y;
	height: 400px;
	width: 400px;
	border: 1px dotted #900;
	}
			
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div id="content">
				make browser window shorter than this box to scroll
			</div>
		</div>
	</body>
</html>

**pinheadj** · Dec 29, 2005 09:43

The code you sent works, but to achieve the opposite of what I'm trying to do. Your example has a strip of background tile going down the middle of the page with solid color on the outside. This I am able to do without problems, it's having the background tile on the outside and white (or another texture) on the inside that isn't working. Let me demonstrate with pictures.

This is what the page looks like (which is how I want it to look) when the window is large enough that there isn't any scrolling :

This, however, is how it looks when you scroll:

You'll notice that the white stops where the end of the window was before the page was scrolled and any more of the page that is scrolled into view just shows the background tile. From what I can tell this is because even with the wrapper, the body tag, and the html tag set to 100% height, this still only represents 100% of the browser window height, not the actual height of the page content. This is what I'm looking for a way around (if possible.)

Any thoughts?