ptg16476052224 LESSON 9: Using Images on Your Web Pages
If you like, you can also include a background color. Here’s what the new tag looks like:
<body style="background: #000 url('backgrounds/rosemarble.gif')
no-repeat fixed center right;">Whether you use the background property or the individual properties for each of the
background-related rules is a matter of taste.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, the users’ screen readers 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.Using Images as Bullets
All the way back in Lesson 5, “Organizing Information with Lists,” you learned about
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 spec-
ify. Here’s an example, the results of which are shown in Figure 9.17.