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
Background Images
Basic Background Images
Multiple Background Images
Full-Screen Backgrounds
round & space
Fading Background Images
Cross-Fading Background Images
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.