5 {{ upvoteCount | shortNum }}
5 {{ upvoteCount | shortNum }}

Quick and easy image question for websites...

by aaallday2010
4 replies
  • WEB DESIGN
    • |
Is it better for a graphical header to be a background image or a regular image?

What are the pros and cons of each?

I ask because on one of my sites I changed the header graphic from a regular image to a background. now, it seems to load slower. I only did it this way because I needed to add some text links on top of the image and couldn't figure out how to do it without setting it as a background first.

If there is a way to put text links directly on top of an image that would be great!

Any ideas?

Thanks.
#easy #image #question #quick #websites
  • Profile picture of the author Gary King
    Did you re-save the graphic when you changed to a background vs an image?

    I've not paid as much attention as I should have and saved things as a png at about 600Kb then saved again as a jpg at about 40kb with no loss of quality. Perhaps that's it?

    You can put links on top of an image. One way it to create text on top of the image (i.e. as part of the actual graphic) then use an image map to make the "links" active.
    HTML map tag

    There are online creators for image maps too.

    Another way is using css and setting the z-index of the image and a new div containing the links. Set the z-index for the graphic lower than the div containing the links.

    One note - make sure you set the position or you'll drive yourself crazy... like position:absolute;

    CSS z-index property

    Hope it helps.
    Signature

    ===========================
    OFFLINERS! Warning: Unless You Know These Pricing Secrets, You are Leaving THOUSANDS on the Table. Get Your Free Report Now.
    {{ DiscussionBoard.errors[1917571].message }}
  • Profile picture of the author blogginvixen
    I think Gary gave you some excellent advice -- especially regarding using the z-index property to add additional items on top of your header image.

    I'd just like to address your original question by saying that if you want your visitors to actually click on your header image to return back to the homepage, setting your header image/logo as a background is not the best route to go. However, if you have a visible 'return home' button, then it really shouldn't make a difference.
    {{ DiscussionBoard.errors[1918464].message }}
  • Profile picture of the author donhendrick
    Originally Posted by aaallday2010 View Post

    Is it better for a graphical header to be a background image or a regular image?
    What are the pros and cons of each?
    Depends on what you are doing.
    If you want to have a link on the image as in the image map then you do not want to use background.
    Originally Posted by aaallday2010 View Post

    I ask because on one of my sites I changed the header graphic from a regular image to a background. now, it seems to load slower. I only did it this way because I needed to add some text links on top of the image and couldn't figure out how to do it without setting it as a background first.
    Thanks.
    I doubt one image being a background vs being a img has any bearing on load time.

    Originally Posted by aaallday2010 View Post

    If there is a way to put text links directly on top of an image that would be great!
    Any ideas?
    Yes use the image map as described by Gary and edit the image to have the verbiage of the link you want to communicate and map accordingly (not a background image at this point)
    Signature
    Don Hendrick
    {{ DiscussionBoard.errors[1918631].message }}
  • Profile picture of the author sharkfla
    I like to use a background image on the header, and have your logo as a seperate image that you can link to the homepage. That gives you the added SEO opportunity with the ALT tags on images
    {{ DiscussionBoard.errors[1932171].message }}

Trending Topics