CSS Cookbook, 2nd Edition

Chapter 3. Images

Introduction

When Marc Andreessen, founder of Netscape, allowed for the inline display of images back in the early 1990s, it helped kick start not only a global discussion, but added enticing visuals. Shared documents no longer were doomed to be text-laden academic papers allowing designers the initial foothold to begin the field of web design.

In this chapter, many recipes regarding CSS interactions with images are discussed. Recipes include dealing with borders, manipulating background images, rounding corners on boxes, replacing HTML text with images and much more.

Placing a Border Around an Image

Problem

You want to place a border around an image.

Solution

Use the border property on the img element (see Figure 3-1):

img {
 width: 300px;
 border: 6px double #666; 
 background: #fff;
 padding: 6px;
} 

Figure 3-1. A border is placed around an image

Discussion

If you make an image a link, there’s a possibility of creating a more complex presentation with the border property. Using the :hover pseudo-class, the style of the border can be changed when a user rolls over the image (see Figure 3-2):

img {
 width: 30px;
 border: 4px double #666;
 background: #fff;
 padding: 4px;
}
a:hover img {
 border-style: solid;
 background: #999;
}

Figure 3-2. Combining background color with border styles ...