O'Reilly logo

Responsive Web Design: Solutions For Responsive Images by Smashing Magazine

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

Simple Responsive Images With CSS Background Images

By Stephen Thomas

This chapter features just one of the many, suboptimal solutions for responsive images. We suggest that you review different approaches before choosing a particular responsive image solution.— Ed.

With all the talk of new HTML5 standards such as the srcset1 attribute and <picture>2 element, as well as server-side techniques such as Responsive Web Design + Server Side Components3 (RESS), you’d be forgiven for concluding that simple, static websites can’t support responsive images today. That conclusion might be premature, however. In fact, there’s an easy, straightforward way to deliver responsive images that’s supported by all of today’s web browsers: CSS background images.

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