/    Sign up×
Community /Pin to ProfileBookmark

background images and alt tags

You can’t give a background image an alt tag in css. However, one options is to simulate a link title on the backround image. For instance, if your background image is within a DIV tag, simply wrap the DIV tag in an A tag. Then give the A tag a link title. With this you can also make the background image a link. I do it all the time when I don’t want to display the image if the stylesheet is disabled.

The set the background color on the div to a color that contrasts with the section on your page. You could even set it to the color of your links. That way, it’s obvious that some link should be there.

if you are making the background image a link, you’ll want to write the line, “cursor:hand;” for the DIV’s class.

Another way is to create a span within the div tag that has the background, and set the visibility to hidden. With this, it will not be displayed on the screen. However, it will be displayed when the style sheet is disabled. Although it doesn’t provide anything useful for images that are not somehow not displayed when refering to a stylesheet, it most likely will be readable by screen readers.

A combination of the two should help with this problem. There’s my hack. Anybody have anything better.

to post a comment
CSS

2 Comments(s)

Copy linkTweet thisAlerts:
@ray326Mar 14.2006 — For instance, if your background image is within a DIV tag, simply wrap the DIV tag in an A tag. [/QUOTE]Invalid HTML. Inline elements cannot contain block elements.
if you are making the background image a link, you’ll want to write the line, “cursor:hand;” for the DIV's class. [/QUOTE]Not if you want valid css. The the cursor that indicates a link is "pointer". There is no "hand".

http://www.w3.org/TR/REC-CSS2/ui.html#propdef-cursor
Copy linkTweet thisAlerts:
@sitehatcheryauthorMar 15.2006 — Regardless, it works... for lack of a better solution, I have done this exact thing several times. Even "hand" works, though it is not on the list.
×

Success!

Help @sitehatchery spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...