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
Optional: read more about creating advanced image matting effects through CSS manipulation of the box model and border-image:
Background Images
Optional: read about the special considerations necessary to place multiple background images on angles.
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. It is those CSS filter effects that we’ll be looking at next.
Photograph by Benjamin von Wong, licensed under Creative Commons.