Submit Your Article Forum Rules

Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Why use background images?

  1. #1
    Junior Member
    Join Date
    Mar 2005
    Posts
    5

    Why use background images?

    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>

  2. #2
    WebProWorld MVP Webnauts's Avatar
    Join Date
    Aug 2003
    Location
    European Community
    Posts
    8,934
    Cool tip. I must try that out!
    Hidden Content Forensic SEO & Social Semantic Web Consultant | My personal blog Hidden Content

  3. #3
    Senior Member Faglork's Avatar
    Join Date
    Feb 2005
    Posts
    913

    Re: Why use background images?

    Quote 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

  4. #4
    Guest

    Re: Why use background images?

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

  5. #5
    Senior Member Faglork's Avatar
    Join Date
    Feb 2005
    Posts
    913
    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

  6. #6
    WebProWorld MVP Webnauts's Avatar
    Join Date
    Aug 2003
    Location
    European Community
    Posts
    8,934
    Quote 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.
    Hidden Content Forensic SEO & Social Semantic Web Consultant | My personal blog Hidden Content

  7. #7
    Senior Member Faglork's Avatar
    Join Date
    Feb 2005
    Posts
    913
    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

  8. #8
    WebProWorld MVP Webnauts's Avatar
    Join Date
    Aug 2003
    Location
    European Community
    Posts
    8,934
    Quote 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
    Hidden Content Forensic SEO & Social Semantic Web Consultant | My personal blog Hidden Content

  9. #9
    Senior Member greeneagle's Avatar
    Join Date
    Dec 2003
    Posts
    5,197
    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
    Mountain Eagle Marketing
    Hidden Content
    Hidden Content

  10. #10
    Senior Member Graf1771's Avatar
    Join Date
    Jul 2003
    Posts
    162
    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.
    Web designer and WordPress developer: Hidden Content
    Mobile application development jobs: Hidden Content for Android, iPhone, Blackberry and web apps.

Similar Threads

  1. How to use Photoshop Sliced images as a background?
    By cg0404 in forum Graphics & Design Discussion Forum
    Replies: 6
    Last Post: 03-23-2010, 12:13 AM
  2. Background images -- tag them ?
    By killerbeame in forum Search Engine Optimization Forum
    Replies: 4
    Last Post: 11-17-2006, 04:05 PM
  3. Stationary Background images?
    By ackerley1 in forum Graphics & Design Discussion Forum
    Replies: 1
    Last Post: 11-24-2005, 06:21 PM
  4. Background images in table cells?
    By ScottG in forum Graphics & Design Discussion Forum
    Replies: 2
    Last Post: 06-25-2004, 11:17 AM
  5. Using background images only once in a cell
    By incraftfun in forum Graphics & Design Discussion Forum
    Replies: 5
    Last Post: 05-07-2004, 03:09 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •