Why does background: never work for me?

**lord_havoc** · 08-14-2007, 03:01 AM

Okay, I have directly copied this line from the "Try it Editor" at w3schools.com and edited it to sow my stuff. And I cannot get the background image to show up. The file is http://cyanideperfection.net/test.html. This is what I have for background information.

Code:

#header{
	background: #000000 url('img_header.jpg') no-repeat fixed center; 
}

**tech_support** · 08-14-2007, 03:15 AM

Broken link.

**jscheuer1** · 08-14-2007, 03:54 AM

Originally Posted by tech_support

Broken link.

That might have been, but it has nothing to do with the problem. The page was invalid and there were numerous typos in the css. Also, there was no height for the header, you cannot see a background image for an element with no height. I fixed things up, sort of, as I cannot know what look you are really going for:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>

<meta 
     http-equiv="content-type" 
     content="text/html; charset=utf-8">
<meta 
     name="language" 
     content="en">

<style type="text/css">
/** Typography & Colors **/
body, html{
	background: #000 url() no-repeat center;
}
#container{
	background-color: #000000;
	border: 2px solid #ffffff;
}
#header{
	background: #000000 url('http://cyanideperfection.net/styles/img_header.jpg') no-repeat; 
}
#navigation{
	
}
#main{
	background-color: #000000;
	border: 2px solid #ffffff;
}
/** End Colors **/


/** Structure **/
#container{
        width: 730px;
	margin: 0px auto;
}
#header{
        width: 100%;
	height:300px;
	float: none;
}
#navigation{
	float: left;
        width: 25%;
}
#main{
        width: 75%;
	float: right;
}
#clear {
clear:both;
}
/** End Structure **/

/** Various Tags **/
p{
        color: #ffffff;
	margin:1em 0;
}        
/** End Tags **/
</style>
</head>
<body>

<div id="container">

<div id="header"></div>
<div id="navigation"><a href="gallery/grand canyon/index.html">Gallery</a><br><a href="contact.php">Contact Me</a></div>
<div id="main"><p>Main body div. Here is where update info will be shown.</p></div>
<div id="clear"></div>
</div>

</body>
</html>

**Twey** · 08-14-2007, 04:34 AM

Is that indentation, John? I thought you were steadfastly against the concept?

**jscheuer1** · 08-14-2007, 04:47 AM

Originally Posted by Twey

Is that indentation, John? I thought you were steadfastly against the concept?

I have no problem with it or any other method that works, especially when I am just updating someone else's code to make it valid and/or work. I really do not like it in scripts though, but have been using it there at times in similar situations for clarity/neatness/consistency. My preferred format for style is:

Code:

selector {
property:value;
}

for scripts:

Code:

function blah(){
some code;
}

With HTML code, I have long preferred no line breaks inside of <>, but am beginning to reconsider that. Don't come near me with a tab character in your HTML code, though. Kidding, but I really don't like them there, they seem to detract from more than add to readability.

**tech_support** · 08-14-2007, 06:27 AM

That might have been, but it has nothing to do with the problem.

How can I view the code with a broken link? Oh, and BTW, it's been edited.

Thread: Why does background: never work for me?

Thread Tools

Search Thread

Why does background: never work for me?

Bookmarks

Bookmarks

Posting Permissions