100% browser fill problem

Hey all, new here and new to CSS. I have made a site for my GF but having problems getting the background image to take up 100% of the browser window. I have googled it, i know how to achieve it, but it just doesn’t seem to work. It is adding an extra 119px to the page (this causes a scroll bar to appear which i don’t want it to do).

I have tried making a container div, and setting the height to 100% etc. but it still won’t work ;< It keeps adding an extra 119px.

I was suggested to use some jQuerry, which kind of worked, but it would only set the background image to take up 100% of the browser window when the page loaded. So if the content exceeded the height of the browser window, and it DID need a scroll bar, the background image would stop short. Same situation if you loaded the page then changed the browser window size.

I hope you followed all this! Here is the CSS (that is relevant):


@charset "utf-8";
 
html,body {
	background-image: url(images/bg.jpg);
	background-repeat: repeat;	
	background-color: #18322f;
	margin: 0;
	padding: 0;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 14px;
	color: #39403a;
	/*min-height: 100%;*/
	height: 100%;
}
 
#container {
	height: 100%;
	width: 100%;
	position: relative;
	margin: auto;
	padding: 0px;
}
 
#banner {
	background-image: url(images/banner.png);
	background-repeat: no-repeat;
	background-position: top center;
	position: relative;
	height: 119px;
	width: 950px;
	margin: auto;
	padding: 0;
}
 
#navbar {
	background-image: url(images/navbar_bg.png);
	background-repeat: repeat-x;
	background-position: top center;
	height: 25px;
	width: 900px;
	margin: auto;
	padding: 0;
	position: relative;
	right: 3px;
}
 
#contentbg {
	background-image: url(images/content_bg.png);
	background-repeat: repeat-y;
	background-position: center;
	width: 950px;
	height: 100%;
	margin: auto;
	padding: 0;
	position: relative;
}
 
#content {
	height: 100%;
	width: 880px;
	padding: 0;
	padding-bottom: -35px;
	margin-top: auto;
	margin-right: 35px;
	margin-left: 35px;
}

And an example html page:


<!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">
 
<head>
 
<!-- jQuerry i was suggested to use 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$('#contentbg').height( $(window).height() - $('#banner').height() );
});
</script> 
 -->
 
<link href="style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>Page title</title>
 
</head>
<body>
 
<div id="container">
<div id="banner"></div>
<div id="contentbg">
 
<div id="navbar">
 
<!--Navigation Bar-->
<ul>
<li><a href="index.html" id="biography">bio</a></li>
<li><a href="drawings.html" id="drawingsnav">drawings</a></li>
<li><a href="paintings.html" id="paintingsnav">paintings</a></li>
<li><a href="flash.html" id="flashnav">flash</a></li>
<li><a href="tattoos.html" id="tattoosnav">tattoos</a></li>
<li><a href="contact.html" id="contactnav">contact</a></li>
</ul>
 
</div>
 
<div id="content">
 
<h1>Page title/h1>
 
<p>
content etc etc
</p>
 
</div>
</div>
</div>

And the website address is: http://www.rachelteague.com/example/ so you can see what i mean.

Thanks in advance.

The problem with putting the banner inside the content div is the banner’s top rounded edges. If i put it inside the content div, the background image will repeat to the top of the screen, which means you can see the background under the banner due to the rounded edges.

Is there away i can set the bg to start repeating after the navbar?

I have already spent quite a bit of time changing height’s and min-heights in the body etc. and trying to put everything into a single div, but still can’t get it to work! It’s driving me crazy.

Hi,

You will have to use a Sticky Footer type (min-height:100%) layout to achieve that. You will have to drag the main wrapping div through the top of the viewport with a negative margin equal to the header height and then pad the first element in the content.

This may be confusing to you if you are not familiar with the method.
Have a look through the Sticky Footer FAQ for a basic understanding.

From looking at the design you may have to sacrifice the round corners on the top of the header since the side shadows on the wrapper would run underneath them.

This layout here is similar to what you are doing although the header is different. View the page source for the details.
http://www.pmob.co.uk/temp/sacha-footer.htm

Here is another very simple bare bones example of the technique.

Welcome to SitePoint, …alex! :slight_smile:

Obviously the extra 119px is due to the banner pushing the content div down. You could place the banner inside the content div to avoid that problem. (Its background properties will override those of the content div anyway).

First, though, it would be good to read this FAQ to help get around all the problems with 100%height. :slight_smile: