Chapter 8. Adding Background Images and Color

The main challenge that arises with adding background images to flexible layouts is ensuring those images will stretch or tile to cover an entire area of unknown dimensions. In this chapter, you’ll learn how to combine background images with background color to extend their range. You’ll also learn how to adapt the popular “faux columns” equal-height columns technique to use in liquid and elastic layouts.

Blending Background Images

A great way to extend the area that a background image will cover is to blend the background image into a matching background color or one or more additional background images so that the pieces appear to be one large background with no seams. This is useful in all types of ...

Get Flexible Web Design: Creating Liquid and Elastic Layouts with CSS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.