I am trying to have an image as the background of my header. It shows correctly in preview on Coffeecup but after I upload the file (and the image to be the background) it doesn't display correctly on the website. It even displays properly when I use Coffeecup to preview in the browser (internet explorer). I don't see what I am doing wrong.

The website is www.hanglidedream.com (you will have to enter the URL since I can't get the site to show up in search results.... could use pointers on that too)

Here is the code for the header:

/* Header */

#header { background-image:url("card1.jpg"); background-repeat:no-repeat; border-bottom: 2px solid #ddd; }

#header h1 { color: #337810; width: 760px; margin: 0 0 3px; padding: 24px 18px 0; }

#header p { color: #ffff66; font-size: 11px; font-weight: bold; padding: 0 18px; }


The file card1.jpg is the background image that I would like to disply as the background for the header.

Please help. I am trying to get this website working properly as soon as possible.

Thanks in advance.

Since everyone else seems to be off scrounging for eggs, I'll throw my 2 cents in Hopefully someone that knows what they're doing will come along soon!
Anyway, I'm not seeing your image in your header code:


It's listed in the style sheet, but not in the actual header? Also, it doesn't seem to have been uploaded to your server - maybe check your files and see if it's actually there somewhere.

If it is showing in Preview but not on your website after uploading, then could well be a filename "case" issue, Windows ignores the case of a filename, but your server does not, the case has to be exactly as it is in the link.

When I change 'card1.jpg' to 'Card1.jpg' I see an image of a hang glider which is 760x151px, is that what it should be.

--------------------------------------

A couple of tips with your Meta tags.

1. Your Description meta tag is too short, try and make it about 20 to 25 words long using 3 or 4 main keywords.

2. You have far too many keywords and phrases in your Keywords tag, you will get penalised in search engines for that, 8 to 10 good ones is all you need, and do not use any that do not appear on your page.
Also, you have not closed the keywords mets tag.

Also use the H1 tag near to the top of the page as Paintbrush has suggested, this tag needs to contain at least a couple of keywords.

Thanks Jim,

I made the changes and the site works. My hang gliding instructor is happy now. I have been getting free lessons for building him a website. This was my first time ever making a website. Maybe I can get some advanced lessons from another instructor if I make another site some day.

I still can't see the site in search results even if I type in the website name in the search window (on Yahoo anyway).

Also, I am not quite sure what Paintbrush is saying that I need to do. Maybe a sample code would help.

Thanks a lot for your help. I have been working way too long trying to get the finishing touches completed on the site. Now I won't feel guilty taking free lessons but still not having a working site.

Mybe not on Yahoo, but several of your pages show up on a Google search of "hanglidedream". Even this CoffeeCup thread shows up

Don't mind me - I know just enough html/css to augment my VSD sites But I had never seen an example where an image that needed to show within the body of the site was only found in the css sheet. This is more typical (from what I've seen poking around behind the scenes):



The image is right there in the header div with some descriptive alt text, which search engines can read. As with your header, the image fills the header space. You can see the site here: http://www.nrahuntersrights.org/

Good to see you got it working I am curious, though - why the 'Ed Levin' photo is outside of the page container, up against the left edge of the browser screen? Don't ya just love noobies nosing around your source code!

A noobie nosing around a noobie's site is scary.

I have those photos to the far side because I haven't figured out how to move them in a bit. They are just extra photos for added flare to the site. I will probably mess with it later. I am just glad to be able to let my hang gliding instructor use the site. I felt I was keeping him from making a living while the site was under construction.

Ronald, there are plenty of very experienced coders here - someone will be able to help you position that photo.

By the way - when you see sites you like, nose around in the code so you can learn how certain lay-outs, effects, etc. are accomplished.

How about positioning it like this?

http://www.coffeecuphelp.com/inger/help/hangglider.jpg

What I did was resizing the img to fit into the column,
placed it within the navigation div,
removed the inline styling from the img,
moved the grey border-bottom from #navigation to #navigation ul.

A couple of other hints: I would choose another charset than unicode, try utf-8
From the metatag keywords delete 'content="keywords" ' (the contents are the actual keywords).
For the image insertion of 'Jan17 Ed Levin 019.JPG' add an alt="" tag and write an alternate text.
For any images or other files that have file names consisting of multiple words, use underscore to make them 'one-word' only, e.g. 'jan17_ed_levin019.jpg'.
Use lowercase file names and file extensions throughout, like my suggestion for the mentioned img.

Good luck!

Inger Eik,

That is exactly how I want the image placed. I will make those changes. Thanks for your help. It will be nice to have the site looking like I want it to. I am looking forward to not having to work on it anymore. It was quite the experience to build.

Paintbrush,

Thanks for the suggestion. That is a good idea and I might learn more for the next website project.


Ron