With all the talk of new HTML5 standards such as the srcset attribute and element, as well as server-side techniques such as Responsive Web Design + Server Side Components (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. However, the approach has some limitations, and it doesn’t work in all cases. But if your requirements aren’t complicated, and if you’re willing to make an extra effort to ensure your images are accessible, CSS background images may be all you need. In this article we’ll look at the CSS background approach in several steps: First, we’ll review the goals and requirements for responsive images. Then we’ll see how CSS media queries can help identify important characteristics of our users’ devices. We’ll explore the key CSS background-image property that lets us respond to those characteristics
↧