...

View Full Version : Body background positioning



daysrunaway
11-20-2010, 12:27 AM
Hi there,

I'm currently working on a website that can be seen here: http://www.michaelskinnider.com/tethco

I'm having a problem with the background. I have a jpg of a gradient that goes from grey at the bottom to white on top, and I need the jpg to be positioned at the very bottom of the page. However, when I set the background CSS property to 100%, it seems to set the top - rather than the bottom - of the jpg to 100% down the page.

Is there a way to set the bottom of the jpg to 100%? Alternatively, is there a way to set the background-position to 100% minus 200px, for example? If neither of these is possible, how can I get the background to the bottom of the page?

Thanks!

Excavator
11-20-2010, 03:54 AM
Hello daysrunaway,
If your page has enough content that it will fill any viewport you expect to load your site then just clearing the floats should be enough.
Try this and see if it's enough -
#container {
margin:0 auto;
width:960px;
background:#ff0; /*just a different color for demonstration*/
overflow: auto;
}

It looks like your site is not tall enough though. Some browsers seem to expand body only enough to wrap it's contents so a background image may not fill the screen.
If that's the case then another containing div may solve the problem. Try this bit of code based on this full height layout (http://nopeople.com/CSS/full-height-layout/index.html) -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
color:#000;
}
#wrap {
min-height: 100%;
margin: 0;
background: #fff url(http://www.michaelskinnider.com/tethco/_/img/gradient.jpg) repeat-x bottom;
}
#container {
height: 600px;
width: 800px;
margin: 0 auto;
background: #999;
}
</style>
</head>
<body>
<div id="wrap">
<div id="container">
<!--end container--></div>
<!--end wrap--></div>
</body>
</html>

daysrunaway
11-20-2010, 07:27 AM
Thanks for the advice, but the solution didn't work: rather than move the image to the bottom of the page, it just moved it to the bottom of the screen. Also, I'm looking to put the background image everywhere BUT the central container div - is this possible?

Thanks again!

Michael

santhoshj400
11-20-2010, 10:29 AM
Hi,
Proceed giving height as 900px and above and if the page is extended after that same grey can be continued by giving background:#496778 url(../images/imagename) repeat-x
as shown then i think this problem will be solved

Excavator
11-20-2010, 06:51 PM
rather than move the image to the bottom of the page, it just moved it to the bottom of the screen.

When I add some content to make the site taller, you can see the image is starting ant the bottom of the page, not the screen. Look at it this way -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
color:#000;
}
#wrap {
min-height: 100%;
margin: 0;
background: #fff url(http://www.michaelskinnider.com/tethco/_/img/gradient.jpg) repeat-x bottom;
}
#container {
width: 800px;
margin: 0 auto;
background: #999;
}
br {margin: 50px 0;}
</style>
</head>
<body>
<div id="wrap">
<div id="container">
some stuff
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
some stuff
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<!--end container--></div>
<!--end wrap--></div>
</body>
</html>

Or am I just mis-understanding your question?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum