HTML and CSS Reference
In-Depth Information
CSS Backgrounds and the
<img>
Tag
Applying backgrounds to elements using CSS is an alternative to using the
<img>
tag to place images on a page. There are many situations in which both options will
work. (For example, if you want to layer text over an image, you can place the text in
a
<div>
and use the image as the background for that
<div>
, or you can use the
<img>
tag and then use CSS positioning to place the text over the image.)
However, there is a rule of thumb that many web designers use when choosing
between the two alternatives. If an image is purely decorative, it should be included
on the page as a background. If an image is part of the content of the page, you
should use an
<img>
tag. So if the page is a news article, and you're including an
image to illustrate the article, the
<img>
tag is appropriate. If you have a photo of a
landscape that you want to use to make the heading of your page more attractive,
it makes more sense to use CSS to include the image as a background in the
heading.
The reason for this rule is that it makes things easier for visually challenged users
who may be visiting a page using a screen reader. If you include your pretty header
image using the
<img>
tag, their screen reader will tell them about the image on
every page they visit. On the other hand, they probably would want to know about
the photo accompanying a news article.
Another simple rule is to think about what you would put in the
alt
attribute for an
image. If the alternate text is interesting or useful, you should use the
<img>
tag. If
you can't think of anything interesting to put in the alternate text for an image, it
probably should be a background for an element instead.
In Lesson 5, “Organizing Information with Lists,” I discussed the
list-style-image
property, which enables you to use images as bullets for lists. Specifying the image URL
for bullets is the same as specifying the URL for background images in CSS. The
browser will substitute the default bullets with the image you specify. Here's an example,
the results of which are shown in Figure 9.21.
Input
▼
<!DOCTYPE html>
<html>
<head>
<title>
Southern Summer Constellations
</title>
<style type=”text/css” media=”screen”>
ul {
