HTML & CSS
Article

Watch: Creating High Resolution Background Images with CSS

By Russ Weakley

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…

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

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.