Grow your CSS skills. Land your dream job.

Background image links with css

  • # January 30, 2011 at 12:03 pm

    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

    # January 30, 2011 at 12:09 pm

    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 ( http://www.jeremycarlsten.com ) 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.

    # January 30, 2011 at 2:02 pm

    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.

    # January 30, 2011 at 2:09 pm

    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.

    # January 30, 2011 at 2:26 pm

    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

    # January 30, 2011 at 2:32 pm

    heres the link

    http://michaeloneilldesign.com/new/

    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)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".