3 replies [Last post]
...alex
...alex's picture
Offline
newbie
Last seen: 9 years 16 weeks ago
Timezone: GMT+12
Joined: 2010-07-13
Posts: 3
Points: 4

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 isn't working. It is adding and 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 up 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>
 
</body>
</html>

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

Thanks in advance.

flamenco
flamenco's picture
Offline
Enthusiast
US, East Coast
Last seen: 8 years 44 weeks ago
US, East Coast
Timezone: GMT-5
Joined: 2009-04-13
Posts: 240
Points: 144

Hi, First the positive... the

Hi,
First the positive... the site looks very nice. Really nice design.

But you're running into a normal newbie goal/issue - trying to get a particular image to fill the screen "100%". This is along the lines of getting something exact, as if you have a printed brochure. It's generally not only near impossible, but not even necessarily desirable. For instance, all I have to do is change my Firefox to occupy the whole screen, and you have a gap at the bottom. You have a banner and content area at fixed heights, so as soon as somebody has a monitor/resolution that is not like yours, it will not look like your screen.

A possible quick fix for gap above IE (not sure). Try the margin setting as per below, I added the zero:

#banner {
background-image:url("images/banner.png");
background-position:center top;
background-repeat:no-repeat;
height:119px;
margin: 0 auto;
padding:0;
width:950px;
}

There are ways to fudge 100% height. I typically get part of the design to seamlessly repeat vertically in case the page content gets super long, or someone has more vertical space on their screen than I do. But this requires some graphics editing and CSS skills, and would require some study.

Also, I have Flash, and every page on the site (except the homepage) is giving me the "you don't have Flash" error. Sites that live and die by Flash often simply die, IMO. Smile

Good luck, D

...alex
...alex's picture
Offline
newbie
Last seen: 9 years 16 weeks ago
Timezone: GMT+12
Joined: 2010-07-13
Posts: 3
Points: 4

Thanks for the reply, and

Thanks for the reply, and design comments ^_^. Not sure why the flash error is suddenly coming up, it isn't working for me either! Im sure it is a quick fix.

I did have part of the design repeating on the Y axis. The contentbg was a repeating image 8px high.

The reason you're getting the gap at the bottom is because of jQuerry. This was my attempted, failed fix.

I have changed the site to exclude the jQuerry and have fixed the flash. Now you can see the 100% fill works except for an extra 119px (height of the banner) at the bottom.

www.rachelteague.com

...alex
...alex's picture
Offline
newbie
Last seen: 9 years 16 weeks ago
Timezone: GMT+12
Joined: 2010-07-13
Posts: 3
Points: 4

El Bumpo?

El Bumpo?