PDA

Click to See Complete Forum and Search --> : Background image over riding all other code?

Saphira
05-08-2009, 11:05 AM
I'm trying (and failing) to create a template for my website. The problem that I'm having, is that the background image over rides EVERYTHING else I put on, from text to links. So all I can see is the background image. I want the image to stretch to use the full screen of the browser, I dunno if this is messing with everything else or what. Here's the code I'm using atm:


<style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#background{position:absolute; z-index:1; width:100%; height:100%;}


/* navigation */
.navigation {
border: 1px solid #DFEEF7;
border-color: #DFEEF7 #CFDEE7;
height: 41px;
}
.navigation a {
border-right: 1px solid #AFBEC7;
color: #456;
display: block;
float: left;
font: bold 1.1em sans-serif;
line-height: 41px;
padding: 0 20px;
text-decoration: none;
}
.navigation a:hover {background-position: left bottom; color: #234;}



</style>
</head>

<body>
<div><img id="background" src="images/background.jpg" alt="" title="" /></div>

<div class="navigation">
<a href="index.php">Home</a>
<a href="account.php">My Account</a>
<a href="tos.php">Terms of Service</a>

<div class="clearer"><span></span></div>
</div>

<h1> blhabsgkjg</h1>


The stuff inbetween the h1 tags is just me testing if the text would appear on top of the background. It never.
yssirhc
05-08-2009, 03:12 PM
can you put the image in the body tag instead?

<body background="images/background.jpg">
skilled1
05-08-2009, 03:33 PM
<style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden; }
body {font-family:verdana, arial, sans-serif; font-size:76%;background:url(images/name.jpg);}



/* navigation */
.navigation {
border: 1px solid #DFEEF7;
border-color: #DFEEF7 #CFDEE7;
height: 41px;
}
.navigation a {
border-right: 1px solid #AFBEC7;
color: #456;
display: block;
float: left;
font: bold 1.1em sans-serif;
line-height: 41px;
padding: 0 20px;
text-decoration: none;
}
.navigation a:hover {background-position: left bottom; color: #234;}



</style>
</head>

<body>
<div>&nbsp</div>

<div class="navigation">
<a href="index.php">Home</a>
<a href="account.php">My Account</a>
<a href="tos.php">Terms of Service</a>

<div class="clearer"><span></span></div>
</div>

<h1> blhabsgkjg</h1>
Saphira
05-08-2009, 08:46 PM
I've tried both of those methods, they both work but they don't stretch the background to the full width and height of the page. :(
skilled1
05-11-2009, 10:48 AM
the only other 'logical' way about doing it, is to slice up your background and have one stagnant repeating background and one that moves with the page

(ie freehostia.com)

or you could use your code, and just set the z-index of that layer with your background to the back, and set the z-index of your above layers as 1, as there is no 'proper' way to stretch an image to fit a page using css