HTML & CSS: Design and Build Websites

16

IMAGES

• Controlling size of images in CSS
• Aligning images in CSS
• Adding background images

Controlling the size and alignment of your images using CSS keeps rules that affect the presentation of your page in the CSS and out of the HTML markup.

You can also achieve several interesting effects using background images. In this chapter you will learn how to:

• Specify the size and alignment of an image using
• Add background images to boxes
• Create image rollovers in CSS

CONTROLLING SIZES OF IMAGES IN CSS

You can control the size of an image using the width and height properties in CSS, just like you can for any other box.

Specifying image sizes helps pages to load more smoothly because the HTML and CSS code will often load before the images, and telling the browser how much space to leave for an image allows it to render the rest of the page without waiting for the image to download.

You might think that your site is likely to have images of all different sizes, but a lot of sites use the same sized image across many of their pages.

For example, an e-commerce site tends to show product photos at the same size. Or, if your site is designed on a grid, then you might have a selection of image sizes that are commonly used on all pages, such as:

Small portrait: 220 × 360

Small landscape: 330 × 210

Feature photo: 620 × 400

Whenever you use consistently sized images across a site, you can ...