Image for header div background

Hi all,

I’m trying to put an image as the background for my header div. But it doesn’t show up as the bg in the div, as expected, after I’ve entered the css and refreshed the page. I’m not sure where I’m going wrong, whether it’s the css, my positioning or the image itself. Here is the css, below. Would appreciate suggestions.


#header {
width: 100%;
height: 160px;
background: url 
([noparse]http://s1214.photobucket.com/albums/cc495/svozdog/?action=view&current=headerbgimage.jpg[/noparse]);
}

#sitename

#tagline


#navigation {
border: 1px solid black;
text-decoration: none; 
font-size: 90%;
color: navy;
font-weight: bold;
width: 100%;  
}

#navigation ul {
list-style: none;
padding: 0;
margin: 0;
border: 2px solid black;
background-color: #ffffff;
overflow: hidden;
width: 100%;
 }

#navigation li {
float: left;
margin: 0;
width: 16.6%;
 }

#navigation li last {
border-right: 17.0%;
}

#navigation a {
display: block;
line-height: 2em;
border-right: 1px solid black;
padding: 0 1em;
}

#navigation .last a {
border-right: none;
}

#navigation a:hover {
color: #FFFFFF;
background: #711515;

 }

#bodycontent, #header, #sitename, #tagline {
border: 4px solid red;
padding: 2px;
margin-bottom: 2px;

Two things off the top of my head. First, the final CSS element is lacking a closing bracket:

#bodycontent, #header, #sitename, #tagline {
  border: 4px solid red;
  padding: 2px;
  margin-bottom: 2px;
}

and second, you have problems with that Photobucket URL. Try storing it on your own hard drive and writing a simple URL to access it for test purposes, say

background: url (..images/headerbgimage.jpg);

and see if those two fixes correct everything.

Now watch someone smarter than me pop in and find something else entirely. :smiley:

Also, make sure not to have a gap between url and the ():

#header {
  background: url(headerbgimage.jpg);
}

I’ve tried those suggestions and amended as seen below, but that didn’t change anything. The bg image is still not showing up.

/* CSS for Hike Direct */

#header {
height: 160px;
background: transparent url (C:\\Documents and Settings\\Daniel Svozil\\My
Documents\\Hikedirect website\\Website Images\\headerbgimage.jpg);}

#sitename

#tagline


#navigation {
border: 1px solid black;
text-decoration: none;
font-size: 90%;
color: navy;
font-weight: bold;
width: 100%;
}

#navigation ul {
list-style: none;
padding: 0;
margin: 0;
border: 2px solid black;
background-color: #ffffff;
overflow: hidden;
width: 100%;
 }

#navigation li {
float: left;
margin: 0;
width: 16.6%;
 }

#navigation li last {
border-right: 17.0%;
}

#navigation a {
display: block;
line-height: 2em;
border-right: 1px solid black;
padding: 0 1em;
}

#navigation .last a {
border-right: none;
}

#navigation a:hover {
color: #FFFFFF;
background: #711515;

 }


#bodycontent, #header, #sitename, #tagline {
border: 4px solid red;
padding: 2px;
margin-bottom: 2px;
}

No you haven’t. You still have a gap between url and the B[/B]:

background: transparent [COLOR="Red"]url (C:[/COLOR]\\Documents and Settings\\Daniel Svozil\\My 
Documents\\Hikedirect website\\Website Images\\headerbgimage.jpg);}

That could be the problem, or it could be that the file path is wrong, but try getting rid of the gap first.

Apologies ralph, I thought you meant spaces between the B[/B] and the C:. Anyway I’ve tried that, and double checked the file path, and neither have fixed that.

OK, sorry for not being clear. :blush: What I tend to do next is open Firebug (a Firefox addon) and hover over the bg image. If the file path is correct, a thumbnail of the image will pop up. If that doesn’t happen, you know the path is wrong.

Obviously this would be easier with a live link, but I gather this is on your computer. Another thing to try would be to make a copy of the page with the CSS in the head of the document, the bg image in the same folder as this test page, and change the bg link to

background: transparent url(headerbgimage.jpg);}

That way you can tell if there’s anything else wrong with the page than the file path.

As an aside, what’s this in you CSS?—

[COLOR="Red"]#sitename

#tagline[/COLOR]


#navigation {
border: 1px solid black;
text-decoration: none;
font-size: 90%;
color: navy;
font-weight: bold;
width: 100%;
}

#sitename and #tagline are out in no-man’s-land, and that could be messing things up. Did you mean to write #sitename, #tagline, #navigation (assuming that the following style block applies to all three id selectors?

Cool. I haven’t got firefox, but I may get it to try that, and also the internal CSS. The #sitename and #tagline are two additional divs, which are edited in the last rule in the css I have included in my post. I have tried removing them, but they have no effect.

OK, good. Let us know how you get on with those. :slight_smile:

Darn me for not seeing the URL gap. That’s what happens when I post “advice” at 3 am.

Back again.

So I’ve worked out what ISN’T wrong. I’ve tried the Firebug add on. Open page in question, clicked firebug icon in top-right of browser, hovered over where the image SHOULD be, and did NOT get the said thumbnail.

I’ve tried using the embedded style sheet. Code is working, seeing as the text and everything else, borders and colors have changed as per the code.

I’ve also double checked the file path, by putting the image straight into the html on the page. And all appears well and good. EXCEPT, the image is still not showing up!

I have had an idea. The image I’m using is white fading to a photo. And it struck me that maybe something WAS wrong with the SIZE of the image. Could the size of the image be so large that it stretches beyond the borders of the div, so that only the white portion is visible (or invisible, in this case) ?

And what would I do with the css to adjust the image to fit just inside the div?

Still sounds like the file path is wrong to me. If the image doesn’t show on hover in FB, then the path is wrong. Try putting the image in the same folder as the page with the CSS in the head. Than just cite the image as

background: url(headerbgimage.jpg)

Since the header is 100% width, it’s unlikely that the image is too big, unless it’s huge. Perhaps align it to the right to check.

since it seems you are new to CSS
try not to shortcode your css just yet.

just get use to writing out each of the properties by hand.

first set the width and height of the header…
setting up the width and height with actual pixels will force the div to expand to those proportions instead of not showing up cause there is no content within the #header div.


#header{
    width: *** px;
    height: *** px;
}

then keep adding on to the properties by telling it what to use as the headers background image…


#header{
    background-color: transparent; /* can change if you are using a transparent .png and looking for a different effect */
    background-image: url(' IMAGE URL HERE ');
    background-position: center center; /* can change depending on how you want the image positioned */
    background-repeat: no-repeat;
    width: *** px;
    height: *** px;
}

and you can even add


margin: 0 auto;
padding: 0;

to center your div, and make sure all the content within this div will be flush in the top left corner.