Resolved Positioning background image at absolute bottom.

henrycooke · 01-03-2010, 02:14 PM

Hi.
So i'm building a pretty basic site for my sister. I have a image of a light gradient which i repeat horizontally. it's white at the top and about 500 px tall. My plan was to have it repeat along the bottom of my site, the empty space above it white. I positioned my background image like so in my CSS.

Code:

body {
	line-height: 1;
	background-image:url('images/background.jpg');
	background-repeat:repeat-x;
	background-position:bottom; 
}

This does not work, instead of putting the image at the absolute bottom of the page, it goes to the bottom of where my content is, which means people with different resolutions will see a big gap beneath it.

other info, i'm using a reset see below, do i need to change something in this to make it work?

Code:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
}
body {
	line-height: 1;
	background-image:url('images/background.jpg');
	background-repeat:repeat-x;
	background-position:bottom; 
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Thanks in advance

VIPStephan · 01-03-2010, 02:22 PM

I don’t particularly like these default reset styles (and I also remember reading that they shouldn’t be used in their default state in every case as you might not want all styles reverted) but anyway: The body element actually is just an element like any other HTML element. It is a little special but basically it adapts to the content just as divisions or any element.
I’ve read somewhere a long time ago that the correct way in XHTML to specify a page background is to apply bg color and/or image to the html element, not to the body (as the body doesn’t automatically take 100% height).

henrycooke · 01-03-2010, 02:32 PM

Thanks for the suggestion, do you mean like this though?

Code:

html {
background-image:url('images/background.jpg');
	background-repeat:repeat-x;
	background-position:0%0%;
	}

Because that doesn't seem to work :[.

I have already tweaked the reset a little and have tried this without it, still seems to screw up.

Would placing an absolute positioned footer work?

VIPStephan · 01-03-2010, 02:35 PM

Please give us your entire code (or a link) to determine the best approach.

henrycooke · 01-03-2010, 02:38 PM

Okay, here is entire code, thank you so much if you sift through it.

index

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Laura Nada Cooke</title>
  <link href="web.css" rel="stylesheet" type="text/css" media="screen" />  
</head>

<body>
  <div id="container">
    <div class="header">
	<img src="images\header.jpg">
    </div>
    <div class="menu">
	<img src="images\block.jpg">
      <a class="menulink" href="#">HOME</a>
      <a class="menulink" href="#">PORTFOLIO</a>
      <a class="menulink" href="#">CV</a>
      <a class="menulink" href="#">CONTACT</a>
    </div>
    <div class="content">THIS IS CONTENT
    </div>
 <div id="footer">s
  </div>
  </div> 
   
</body>
</html>

CSS

Code:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
}

body {
	line-height: 1;
	
}
html {
background-image:url('images/background.jpg');
	background-repeat:repeat-x;
	background-position:0%0%;
	}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

.header {
border: 1px solid #484848;
width: 960px;
}

.menu {
border: 1px solid #484848;
width: 960px;
background-color: #484848;
text-align: right;
}

#container {
width: 960px;  
margin: 0 auto;
margin-top: 20px;

}
#footer  
{
     color: #f0c;
     font-size: 9px;
     font-family: Verdana, Geneva, Arial, sans-serif;
     text-align: center;
     position: absolute;
     bottom: 0px;
     left: 0px;
     width: 100%;
     height: 18px
     }

VIPStephan · 01-03-2010, 03:34 PM

Well, OK, you also need to set the height of the html element to 100% explicitly. That was the next guess I would have taken.
I’d recommend to use the shortcut:

Code:

html {
	background: white url(images/background.jpg) bottom left repeat-x;
	height: 100%;
}

And if you just have a simple gradient then I’d suggest you make it a PNG (24 bit). That’s better quality

henrycooke · 01-03-2010, 09:36 PM

thank you so much, works perfectly.