In this short video, I’ll show you how to create a background container that scales seamlessly to fit any browser size.

Loading the player…

Russ Weakley Russ Weakley
Russ Weakley is a world-renowned author, speaker and CSS expert, with a detailed knowledge of web design and development. Russ chairs the Web Standards Group (WSG) and produced a series of widely acclaimed Learnable tutorials on CSS. He is currently touring a series of Responsive Web Design workshops around Australia.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • Irfan

    Awsome trick.. thanks :)

  • https://www.odysseyforge.com/ Matt

    The video embed on this page displays outside the portrait mode viewport on my mobile chrome browser using a Nexus 5 running Android 5.1.x, do you guys not use some form of the intrinsic ratio method?

    I can also swipe to the left and the entire sitepoint page here slides out of view and all I am left with is a dark gray background.

  • donsw

    great video. might want to make the source and images available to everyone to try it out.

  • Chris Loughnane

    Thank you very much.

  • Loren Wolsiffer

    I agree with donsw, would be nice to have a demo page to view and play around with.

  • Bhongo

    Thanks for sharing Russ.

  • Brett

    Thanks for this Russ.

    Any insight on why/when you would use this background image approach over a responsive html image solution such as picturefill?

    • Sean Lamberger

      I was wondering the same thing. Maybe as a legacy solution for older browser versions that don’t play nice with srcset or picture and/or have javascript disabled?

  • https://www.sgclarke.com/ Sean

    Nice technique, thanks Russ!

  • https://www.technbuzz.com/ Samiullah Khan

    This intrinsic ratio works really well in this case, before this video I used to manually give height to background images or just use the tag. It’s also used while making embedded video responsive.

  • Russ Weakley

    Code examples available on GitHub here: https://github.com/russmaxdesign/scalable-backgrounds-in-css

  • sanns

    Nice! But how can one use it in real site? And what’s the other site which is told about in the beginning of the video?

Recommended for you

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.

Get this deal