Positioning Images with CSS

Category: CSS
Reviewed by: swnesbitt   
Reviewed on: Jul 17 2004

If there's one thing that Web developers and Web surfers like it's graphics. You name it: wild backgrounds, image maps, funky decorations, and more. But accurately placing images on a Web page can be a messy process. Many Web developers use workarounds like tables to position graphics just the way they want.

Using Cascading Style Sheets (CSS), you don't have to resort to a bunch of tricks in order to place graphics where you want them on your Web pages. CSS gives you fine control over where you can position your images. This article looks at how to use CSS to specify background images, as well as how to precisely place images in the body of your Web pages.

Why CSS?

One question I'm frequently asked is "Why should I use CSS to position my images, instead of using the align attribute?" First off, the align attribute (as in align="left" and align="right" attributes in the tag) are no longer part of the HTML or XHTML standards. Browsers still support align, but if you want your pages to be valid HTML or XHTML, using this attribute is a no-no.

The main reason, though, is precision. Using align="left" and align="right" is limits where and how you can place your graphics. While you can use workarounds like tables and spacer graphics to place your images, these solutions are messy and don't always put the graphics where you want them. CSS, on the other hand, is simple and elegant.