Watch: Creating High Resolution Background Images with CSS

By Russ Weakley September 14, 2015

More from this author

In this screencast Russ Weakley shows you how to create high resolution background images including at a 2x and 3x resolution for narrow and wide screens using the webkit-min-device-pixel-ratio and min-resolution media queries.

View the code sample provided.

Loading the player…

high resolution images, Instructional video, Sitepoint Premium

Meet the author

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.

http://careersreport.com Sandra Bean

There is a method how you can make sixty-five dollars every hour… After being without work for 6 months , I started freelancing over this site and now I could not be more happy . After 3 months doing this my income is around five thousand bucksmonth -Check link on ! MY-PROFILE-PAGE for more info
Martin Lenngren

Hi, this sounds great but I was wondering if you checked if all browsers just download the image it displays? Or did any browser perhaps download more than one image?
http://careersreport.com elizabeth_barnes6

Here is how you can make @ 65 bucks /hr… After being unemployed for half-a-year , I started working over this website and today I am verry happy. After 3 months doing this my income is around 5000 bucksmonth -Check link on MY-PROFILE for more info
Kevin Harter

Thanks for the easy-to-comprehend explanation! I’ve been putting off fixing a header image on tablets for one of my sites, but this should do the trick!

Also, thank you so much for putting in “closed captioning” so I can watch this at work with disturbing coworkers or wearing headphones.
Russ Weakley

Hi Martin

This is a very good question. I was going to address it in the video but it would have made the video twice as long :)

In theory, browsers and devices will only load the assets that they need. So, a browser at wide screen on a 2x resolution device *should* only load the wide 2x image.

If you download the github demo that I built (link above in the article), you can actually test this yourself.

Open the page locally and then fire up Inspect Element and go to the “Network” tab. If you refresh the page, you will see a list of all resources being delivered in order to build the page.

If you hit the “Record” button, the list is cleared. This means you can now see new assets as they are delivered.

If you make your viewport smaller, you should suddenly see a new asset loaded – the narrow screen version of the image.

This means that the browser is only loading the narrow background image if needed.

iPhones used to have a major issue in the past as they would download all assets – even if not needed. From what I understand, this has been resolved.
redcrew

Thank you for the explanation. Has anyone been able to get the captions to display? I’ve tried two browsers (Chrome and Firefox) on two different devices, but can’t get the captions to display.
- Angela Molina
  
  Hi redcrew, thanks for pointing this out. I’ll have the developers look into this. Could you tell me what browser versions you are using to view the screencast?
  - redcrew
    
    Thank you for the reply Angela. Is anyone able to get the captions to display? I tried to watch the captioned video on Chrome 45.0.2454.86 and Firefox 40.0.3
- Angela Molina
  
  Hi redcrew, thanks for pointing this out. I’ll have the developers look into this. Could you tell me what browser versions you are using to view the screencast?
http://careersreport.com Kathy Compton

Allow me^ to show you a genuine way to earn a lot of extra money by finishing basic tasks from your house for few short hours a day — See more info by visiting >MY*&___(DISQUS)*%___ID)