Web images are modified by CSS in one of four ways: basic positioning and gutters, borders and framing effects, placing images in the background of HTML elements, and filters. The first three are some of the most common applications of CSS.

Goals: place images on web pages and in backgrounds and position them; apply framing effects to images with CSS.

Prerequisites: Introduction to CSS, HTML Images

Total time: 3 hours

1. Sizing & Float
2. Float Quirk & Clear
3. Encoding Images With DataURI

Background Images

1. Basic Background Images
2. Multiple Background Images
3. Full-Screen Backgrounds
4. round & space
5. Fading Background Images
6. Cross-Fading Background Images
7. Cicada Principle Backgrounds

See also techniques and treatments for background images and using image-set backgrounds for Retina screens.

Using photographic images of any kind on a web page usually demands some image processing beforehand. In particular, some background images require particular processing techniques before they can be used on a page. It should be emphasized that bitmap editors should only be used for basic, initial processing and optimization; in modern browsers, filter effects are more effectively applied via CSS, rather than being “baked” into the image.

Photograph by Benjamin von Wong, licensed under Creative Commons.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.