#header

This site is best viewed in a modern browser with JavaScript enabled.

Josh1977

Hey all, I am having an issue for a class assignment, and I know no one wants to do my HW for me but this has got me stumped and I could really use some guidance here.
Okay so what I am doing is taking my logo banner image and taking it out of my <h1><img src> tags and moving it to my CSS style sheet using the #header like the mark up below:
#header{
display: block;
background-image:url(img/javalogo.gif);
height: 117px;
background: #ccaa66;
color: #000000;
text-align: center;
margin: 0;
}
This is just the code from my stylesheet, but it will not work, however the rest of the styles work so the link from my index.html page is good. What am I doing wrong here?

simplypixie

Are you sure the path to your image is correct (it needs to be relative to your stylesheet, not the page)?

webdoer

See http://www.w3schools.com/css/css_background.asp

CSS properties used for background effects:
background-color
background-image
background-repeat
background-attachment
background-position
Background Image
The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
The background image for a page can be set like this:
body {background-image:url('paper.gif');}

I haven't gotten info about currrenet usage of the "quotes" in {background-image:url('paper.gif');} -- image path/name used to be unquoted, now I'm seeing examples like that above where image "path/name" is quoted. And not specifying background-repeat seems to default repeat tile.

My last guess, like _____, is that the path to the image is wrong. As __ noted, the path is relative to the stylesheet. So I'm guessing your CSS file is in a sub-folder ? If so, you have to work you way up out of that sub-folder with 2 dots slash ../img/logo.gif preceding the path.

Am I off in my guess?