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:
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?
I can only guess the logo is not referenced appropriately relative to the location of the style sheet. What does the directory structure look like?
Like tacknut, I'm guessing it might be the path to the image relative to the stylesheet. Is the CSS in a separate text file in a sub-folder? If so, you need to dig up out of the sub-folder by proceeding the image path with 2dots slash ../img/javalogo.gif.
I don't have info about using quotes about the image name in background-image: url("img/javalogo.gif") -- the image path/name used to be unquoted in this usage, now I'm seeing examples where it is "quoted" (like a string used in the IMG tag, etc.) See http://www.w3schools.com/css/css_background.asp
Also not specifying background-repeat, just defaults to repeat tile.
I image the relationship between the image folder and the CSS file is different than when you used the path directly on the HTML file:
Just make sure you have correct width/height for header container. The "../" is just telling browsers how many directories to backup to to find the image. Correct as needed. If a tiled image, change CSS rules as needed.
width: XXXpx; height: 117px;
margin: 0 auto;
background: #ccaa66 url(../img/javalogo.gif) no-repeat center scroll;
As easy as that! Just place where you want header to appear on page.
Absolute and Relative Paths: http://webdesign.about.com/od/beginn.../aa040502a.htm