The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Background image links with css

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #31420

    What are faults with using a background image for link ? I am using background images for links with a css id and making the images change with :hover in the css. Someone has advised me against this but I want a 2nd opinion. Thanks


    As far as i know people, including myself, use background images all the time in navigation; such as, when using css sprites; however, make sure to supply an alternative in case the images don’t load or someone has them turned off. Do note however I’m often an offender of un-semantic code. Like on my website ( ) I recently re-themed it using positive margins in my first column and negative in the second to get them to line up ^^, I have been informed in the critique post that that’s a big No-No.


    When you say use a background image, do you mean there is some decoration behind the link, or is the actual text of the link displayed in the background image.

    If it is the former, then there is no problem with that, pretty much everyone does this. The latter, on the other hand, is very poor practice and makes your site design inaccessible to a lot of people.


    The actual text is on the background image. I know its bad practice but on the other hand, its much better looking. For people who can view images etc you can use the title attribute or specify the image in the HTML and give it ALT text.


    Got an example we can look at? You can pretty much use any font you like these days, so I’m not sure why you need to use background images. Images in the HTML is slightly better though, as long as you use the alt tag


    heres the link

    I want to specify the image in the HTML but im using sprite and its not working.

    Any ideas on what I could do ?

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.