Why use background images?

**frobn** · 02-19-2005, 01:31 PM

Why use background images?

When structuring a web site I try to keep in mind how the template will play with search engines. Here is a tip to increase search engine friendliness. Most web sites are designed with images for the header which will load first. Search engines do not recognize images and the alt tag has a low priority in ranking.

You want a nice image header and a serach engine friendly site, so here is what I do.

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

Code:

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

Note: It is a fallacy that an image sliced into parts will load faster.

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.

Code:

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

<h1>The Best Real Estate in My Town</h1>

</div>

Use your own text between the heading tags

.

**jimj** · 02-19-2005, 02:07 PM

Thanks for the tip!

**San Diego Real Estate** · 02-20-2005, 02:54 PM

Originally Posted by frobn

Why use background images?

When structuring a web site I try to keep in mind how the template will play with search engines. Here is a tip to increase search engine friendliness. Most web sites are designed with images for the header which will load first. Search engines do not recognize images and the alt tag has a low priority in ranking.

You want a nice image header and a serach engine friendly site, so here is what I do.

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

Code:

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

Note: It is a fallacy that an image sliced into parts will load faster.

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.

Code:

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

<h1>The Best Real Estate in My Town</h1>

</div>

Use your own text between the heading tags

.

frobn, that is great!

Thanks for sharing!

**justicewhite** · 02-22-2005, 03:00 PM

The power of CSS

Check out the Zen Garden site at www.csszengarden.com as well.

**frobn** · 02-23-2005, 04:02 PM

csszengarden.com has excellent examples of css design. Anyone who thinks css is boring needs to see the examples there. The one drawback I find is that the site only accepts entries from graphic artists, many of the designs are graphic heavy and not counter balanced with lighter weight designs. Try http://alistapart.com for examples on how CSS/xhtml can improve SEO.

**hawkwind dave** · 03-18-2005, 06:14 AM

I find www.w3schools.com an excellent resource for CSS.

**Las Vegas Real Estate** · 03-20-2005, 12:56 PM

EXCELLENT tips.... thank you.

**Las Vegas Homes** · 03-21-2005, 03:15 AM

Frobn every time you post your knowledge amazes me. I would have to admit you are one of the top contributors to this real estate forum. I hope we get to enjoy your post on how we can improve our real estate sites for a long time to come. Cheers