www.webdeveloper.com
Results 1 to 5 of 5

Thread: Background image over riding all other code?

  1. #1
    Join Date
    May 2009
    Posts
    2

    Background image over riding all other code?

    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.

  2. #2
    Join Date
    Mar 2009
    Posts
    61
    can you put the image in the body tag instead?

    <body background="images/background.jpg">

  3. #3
    Join Date
    Apr 2006
    Posts
    493
    <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>

  4. #4
    Join Date
    May 2009
    Posts
    2
    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.

  5. #5
    Join Date
    Apr 2006
    Posts
    493
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles