O'Reilly logo

Flexible Web Design: Creating Liquid and Elastic Layouts with CSS by Zoe Mickley Gillenwater

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required