CSS woes - repeating background adds scrollbar

j3ron · Dec 16, 2008

I'm trying to redo a frames site using div's.

you can see the temp site at

test

I'd like to get rid of the scroll bar and have the background in the middle (beneath the "footer text") behave like the background images in the side columns - so it'll size itself to different browser window sizes. I just can't seem to get it to work as with the side columns.

here's the code:

Code:

<html>
<head>
<title>test</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<link rel="shortcut icon" href="Favicon.ico" type="image/x-icon" />
 
<style type="text/css">
 
h1 {
color: #00ff00;
margin: 0;
padding: 0;
}
h2 {
color: #dda0dd;
margin: 0;
padding: 0;
}
p {
	color: #00ff00;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #000;
	
	}
 
html, body {
margin: 0;
padding: 0;
}
 
body {
	text-align: center;
	margin: 0;
	padding: 0;
	background-color: #000;
}
 
#header {
	width: 816px;
	height: 80px;
	padding-top: 0%;
	margin: 0 auto;
	text-align: center;
	overflow:hidden;
	background-image: url(img/header.jpg);
	background-color: #000;
	background-repeat: no-repeat;
	background-position: center;
}
 
#menu {
	width: 816px;
	height: 25px;
	padding-top: 0%;
	margin: 0 auto;
	text-align: center;
	background: #000000;
	overflow:hidden;
	background-image: url(img/menu.jpg);
}
 
#content {
width: 816px;
height: 480px;
margin: 0 auto;
text-align: center;
overflow:auto;
background: #000000;
}
 
#thm {
width: 816px;
height: 120px;
margin: 0 auto;
text-align: center;
background: #000000;
overflow:auto;
}
 
#footer {
width: 816px;
height: 25px;
margin: 0 auto;
text-align: center;
background: #000000;
overflow:auto;
}
 
#btm {
	width: 816px;
	height: 100%;
	text-align: center;
	overflow:visible;
	background-image: url(img/grad_mid.jpg);
	background-color: #000000;
	background-repeat: repeat;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	background-position: 0px -1px;
}


.column {
	width: 50%;
	position: absolute;
	top: 0;
	height: 100%;
}
 
.left {left: 0;}
.right {right: 0;}
 
#leftcol {
	margin-right: 408px;
	background: #000000;
	background-position: top right;
	height: 100%;
	background-image: url(img/grad_left.jpg);
	background-repeat: repeat-y;
}
#rightcol {
	margin-left: 407px;
	height: 100%;
	background-position: left top;
	background-image: url(img/grad_right.jpg);
	background-repeat: repeat-y;
	background-color: #0000000;
}
 

</style>
 
</head>
<body>
 
<div class="left column">
<div id="leftcol"></div>
 
</div>
 
<div id="header">

</div>
 
<div id="menu">

</div>
 
<div id="content">
<h2>Content goes here</h2>
</div>
 
<div id="thm">
<p>thumnail images here</p>
</div>
 
<div id="footer">
<p>footer text</p>
</div>

<div id="btm">
</div>
 
<div class="right column">
<div id="rightcol"></div>
</div>
 
</body>
</html>

Thanks

shaneiadt · Dec 24, 2008

#btm {
width: 816px;
height: 100%; /*height:30px; (something like that)*/
text-align: center;
overflow:visible;
background-image: url(img/grad_mid.jpg);
background-color: #000000;
background-repeat: repeat;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-position: 0px -1px;
}

You should change the above height to specify pixels instead of a percentage

Or maybe even set it to auto! Or even put the whole thing in one container div and set the max height for all div's in that container.

CSS woes - repeating background adds scrollbar

j3ron

New Member

shaneiadt

New Member