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.
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.
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. 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.
#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.
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.