CSS Mastery: Advanced Web Standards Solutions | Part 2/Page 3
CSS Mastery: Fixed-Width, Liquid, and Elastic Layouts and Faux Columns
Liquid and elastic images
If you choose to use a liquid or an elastic layout, fixed-width images can have a drastic effect on your design. When the width of the layout is reduced, images will shift and may interact negatively with each other. Images will create natural minimum widths, preventing some elements from reducing in size. Other images will break out of their containing elements, wreaking havoc on finely tuned designs. Increasing the width of the layout can also have dramatic consequences, creating unwanted gaps and unbalancing designs. But never fearâ€”there are a few ways to avoid such problems.
For images that need to span a wide area, such as those found in the site header or branding areas, consider using a background image rather than an image element. As the
branding element scales, more or less of the background image will be revealed: