PDA

View Full Version : Trouble with background -- absolute positioning?



vendian
Sep 10th, 2007, 04:12 AM
I've run into a bit of a pickle... and I'm not exactly a CSS master or anything. I need some help positioning my background. I want it to stay anchored to the bottom of the page, however, if I use:


<img src="Backgroundbig2.gif" alt="" style="position: absolute; bottom: 0px; left: 0px" />

that code it stays stuck to the bottom of where the browser window is -- but if the page scrolls at all, it stays at where the bottom of the page was and does not follow.

The link for that page is here:
http://homepage.mac.com/vendian/younggunz/index.html

And here's the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>index</title>
<style type="text/css">
body {background-color: rgb(51,51,51); height:100%; overflow-y:auto; /* background-image: url(Backgroundbig2.gif); background-repeat: no-repeat; background-position: bottom left; */ }

a:link {color: #E6B347;}
a:visited {color: #E6B347;}
a:hover {color: #00CCFF;}

#menu { position:absolute; left:-60px; top:115px }

#nav { background:url(Links.gif); }
li { float:left; list-style-type:none }
li a { height:41px; display:block; top:0; text-indent:-9999px; outline:none }
li#about a, li#roster a, li#schedule a, li#stats a, li#forum a, li#contact a { background-image: url(Links.gif); }

#about a { display: block; height: 41px; width: 165px; background-position: -0px 0px; }
#about a:hover { display: block; height: 41px; width: 165px; background-position: -0px -41px; }

#roster a { display: block; height: 41px; width: 164px; background-position: -165px 0px; }
#roster a:hover { display: block; height: 41px; width: 164px; background-position: -165px -41px; }

#schedule a { display: block; height: 41px; width: 197px; background-position: -329px 0px; }
#schedule a:hover { display: block; height: 41px; width: 197px; background-position: -329px -41px; }

#stats a { display: block; height: 41px; width: 141px; background-position: -526px 0px; }
#stats a:hover { display: block; height: 41px; width: 141px; background-position: -526px -41px; }

#forum a { display: block; height: 41px; width: 151px; background-position: -667px 0px; }
#forum a:hover { display: block; height: 41px; width: 151px; background-position: -667px -41px; }

#contact a { display: block; height: 41px; width: 206px; background-position: -818px 0px; }
#contact a:hover { display: block; height: 41px; width: 206px; background-position: -818px -41px; }

#menu3 { position:absolute; top: -15px; left: -40px}

#nav3 li { float:none; list-style-type:none; }
#nav3 li a { height:140px; width: 75px; display:block; top:0; left:0; text-indent:-9999px; outline:none }

#nav3 li#home a { background-image: url(home.gif); display: block; height: 75px; width: 75px; background-position: 0px 0px;}
#nav3 li#home a:hover { display: block; height: 75px; width: 75px; background-position: -0px -75px; }

</style>
</head>

<body>
<img src="Backgroundbig2.gif" alt="" style="position: absolute; bottom: 0px; left: 0px" />
<img src="spraypaint.gif" alt="" style="position: absolute; top: 125px; left: 5px" />
<img src="banner.gif" alt="Young Gunz" style="position: absolute; top: 5px; left: -10px" />
<div style="position: relative; z-index: 1; background-image: url(black_pixel_35.png); margin-left: 220px; margin-top: 190px; width: 700px; padding: 10px;">
<div style="color: white;">Welcome to the Young Gunz website!<br /><br /> Young Gunz is a newly formed ice hockey team that is going to play at Desert Schools Coyotes Center in Chandler. We are in the TIER 1/2/3 league, and our very first game as a team will be on September 9th, 2007 -- a pre-season game against the Thunderbirds. Gametime is 10:50PM on the north pole of the rink. We are hoping to roster a team of thireen players and a goalie. Currently, we have nine players and a goalie, and we are searching for two more players that are able to come out and play. Right now the team is searching for sponsorships to help us pay for our Jerseys and Socks. Jerseys aren't cheap, and current quotes put the cost per jersey at over $100 each. We need 32 Jerseys for the whole team -- home and away -- putting the cost of Jerseys alone anywhere between $3200-$5500. Our jersey design is as follows: <br /><br /><img src="jerseyhome.gif" alt="" /><img src="jerseyaway.gif" alt="" /><br /><Br /></div></div>
<div id="menu">
<ul id="nav">
<li id="about"><a href="about.html">about</a></li>
<li id="roster"><a href="roster.html">roster</a></li>
<li id="schedule"><a href="schedule.html">schedule</a></li>
<li id="stats"><a href="stats.html">stats</a></li>
<li id="forum"><a href="forum.html">forum</a></li>
<li id="contact"><a href="contact.html">contact</a></li>
</ul></div>
<div id="menu3">
<ul id="nav3">
<li id="home"><a href="index.html">home</a></li>
</ul></div>
</body>
</html>

To make things worse, if I use:


<style type="text/css">
body {background-color: rgb(51,51,51); background-image: url(Backgroundbig2.gif); background-repeat: no-repeat; background-position: bottom left; }

For some reason the rest of the code I have screws things up. It makes the background hug far higher than the actual bottom of the page depending how much content is on the page... it's confusing :/.

Here's an example of that screw up: http://homepage.mac.com/vendian/younggunz/vs.html

All I want it to do is hug the bottom of the page regardless of scrolling.

Anyone -- help please?

Fang
Sep 10th, 2007, 09:22 AM
This would do it in modern browsers, but for IE>=6 an alternative is: http://www.cssplay.co.uk/layouts/fixed.html

<img src="Backgroundbig2.gif" alt="" style="position: fixed; bottom: 0px; left: 0px" />

vendian
Sep 10th, 2007, 10:20 PM
This would do it in modern browsers, but for IE>=6 an alternative is: http://www.cssplay.co.uk/layouts/fixed.html

I found that page when I was searching around on my own from another site, and unfortunately it has me rather confused. It doesn't really explain the code used on the site, is there anyone that could implement this code into my own site so that I may better understand it?

Sorry for the inconvenience -- I tried using that and I couldn't figure it out :confused: