O'Reilly logo

Responsive Web Design Patterns by Chelsea Myers

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

Responsive image patterns

Now that we have covered how to optimize the images you want to put on your website, let's look at ways you can lay them out. As mentioned, a trend right now is having a huge image span full width of the page with some text (usually the company's name and tagline) shown on top of it. Why don't we start with doing that then?

The big hero image

Websites using this pattern typically have big beautiful images displaying their work or company. For the sake of this example, I grabbed a pattern from Subtle Patterns (http://subtlepatterns.com/) and created two images: banner-2000.png and banner-1400.png. As we saw earlier in this chapter, these big hero images normally have text overlaid on top of them. As you can see in the following ...

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