Why use background images?

[frobn]

In developing web sites I try to make them as user friendly and as search engine friendly as I can. Here is a tip to increase both search engine friendliness and user friendliness. Most web sites are designed with images for the header which will load first. Search engines do not recognize images and the alt atribute has a low priority in ranking.

You want a nice image header and a friendly site, so here is what to do?

Place the header in a <div> and load the image as a background image, i.e.

<div style="background-image: url('my_nice_header.jpg'); height:150px; width:760px;"> </div>

(Replace height and width with the height and width of you image. If you use tables the div can be put in a table cell.)

You have now accomplished three things.

1. Your page content will load faster because background images load last.

2. The search engine reads your more important text content first.

3. You can write over the image. I often put the site name in <h1> tags so that this is the first thing that the search engine reads.

<div style="background-image: url('my_nice_header.jpg'); height:150px; width:760px;">

<h1>www.my_domain_name.com (or other text)</h1>

</div>

[Webnauts]

Cool tip. I must try that out!

[Faglork]

Originally Posted by frobn

3. You can write over the image. I often put the site name in <h1> tags so that this is the first thing that the search engine reads.

<div style="background-image: url('my_nice_header.jpg'); height:150px; width:760px;">

<h1>www.my_domain_name.com (or other text)</h1>

</div>

If you have your text in a fancy font in the image and don't want the h1 get "in the way", you can set line-height: 1px; and the h1 will not show. This is an excellent "image substitution" which is SE-friendly and accessible as well. AND it looks good.

Let me add that this technique makes your site a lot more easy to access with mobile devices, because those devices ignore background-images. If you have the image up in the content, large images will fill up the small cache of the mobile devices and the browser will crash/stop working/whatever.

Alex

Originally Posted by faglork

If you have your text in a fancy font in the image and don't want the h1 get "in the way", you can set line-height: 1px; and the h1 will not show. This is an excellent "image substitution" which is SE-friendly and accessible as well. AND it looks good.

There are ways in to upload your fancy font to the server and can be used in the website so everyone gets the benefit of the font. When I get a chance I will write a "tip" on how to do it, or someone might beat me to it.

[Faglork]

Honestly, I wouldn't want to install additional fonts just to view a website. Especially, as there might be licence issues at hand.

A good way for (accessible!) substituting fonts is to render them on the fly with javascript/php/GD:

http://www.alistapart.com/articles/dynatext/

Alex

[Webnauts]

Originally Posted by faglork

Honestly, I wouldn't want to install additional fonts just to view a website. Especially, as there might be licence issues at hand.

A good way for (accessible!) substituting fonts is to render them on the fly with javascript/php/GD:

http://www.alistapart.com/articles/dynatext/

Alex

Alex I would advice though to avoid the JavaScript option in concerns of accessibility.

[Faglork]

Hehe ... you didn't read the article, did you? ;-)

The solution is perfectly accessible. UAs without JS just get plain text, in whatever CSS formatting you specify.

Just have a look at the demo.

Alex

[Webnauts]

Originally Posted by faglork

Hehe ... you didn't read the article, did you? ;-)

The solution is perfectly accessible. UAs without JS just get plain text, in whatever CSS formatting you specify.

Just have a look at the demo.

Alex

Hmmmm, that was stupid from me. You are right: I did not read the whole article. Though wasn't the <noscript> tag missing? LOL

[greeneagle]

frobn,

From a Marketing perspective, I like the effect of the background image the way I CSS'd it on my Site. The Eagle is constantly with you, like a guide in the background, and even stays by itself, when navigating between pages. I would suppose that any background image has that residual "Branding" benefit that can be tapped, if desired?

Nice Post by the way, and welcome to WPW.

Thanks,
Ken

[Graf1771]

another reason for using background images is so that the only images not in the css files are then "active" or clickable, it also means that you reduce the need for alt tags (although you may not want that for sec purposes).

The thing with the hidden H1 tag - why not use it as good accessibility practice? Hide it from most viewers but use it as the title for the page for disabled users or those without css...

for example, a site i'm working on:

http://www.welshwomenslacrosse.co.uk/

if you disable the css you can see added links and titles to help non-css viewers navigate around the site.

[sch3dana]

Hi All,

I am looking for some good advice from people with more experience than myself. In this thread (and in many other places) I've read that bg images load last. But I am having problems with that.

I am working on a site, though I wouldn't call myself a web designer, so I may have more mistakes there than I realize. Problem is, the BG image is big and seems to load first when I test it in a 56k "modem emulator". It takes about 20 seconds to even see any text on the page! I never noticed before of course, bc I'm not on dial up. In IE 7 on a PC it's even worse- the whole page takes 40 seconds to load and then everything appears in one moment!

So, now I'm confused. Everything says BG images load last. Have I done something wrong or is the emulator wrong? I really don't want to lose the BG image, but I also don't want to lose all my readers who are on dial up.

Can anyone help? Please don't tell me to optimize the image- I can't go any smaller without losing obvious quality. What I really need is a way to make the images load last.

Here's the body css:

body {
color: #1B5975;
background-color: #503010;
font-size: 1em;
background-image: url(../images/bubbles-gradient.jpg);
background-repeat: repeat-x;
font-family: Arial, Helvetica, sans-serif;
}

[dreras]

sch3dana,

How big is your background image? in pixels. When your optimizing your photos in photoshop or whatever (when your about to save it out) you should see a small box in the bottom of the frame that says how long the graphic will take to download on a 56k modem.

If by chance it doesn't add up to 40 seconds I might say that you have a problem else where on the page that's causing the slow load time.

If it does say 40 seconds than double check to make sure your dealing with a 72 dpi photo. 300 dpi isn't going to do you any good on the web.

Can you give the url?