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:

HTML Code:

<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

**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

Thread: Background image over riding all other code?

Thread Tools

Display

Background image over riding all other code?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions