HTML & CSS
Article

Video: Scalable Backgrounds in CSS

By Russ Weakley

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…

  • Irfan

    Awsome trick.. thanks :)

  • 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?

  • Nice technique, thanks Russ!

  • 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
Sponsors
Get the latest in Front-end, once a week, for free.