Grow your CSS skills. Land your dream job.

Do media query-specific background images load regardless of media query?

  • # April 7, 2013 at 9:06 am

    Hi guys

    I am building a mobile-first website with all CSS served on one compressed stylesheet using media queries.

    Now lets say I have a background image for a selector in the default css (no media query, mobile-first) which is 20k in size.

    At media query with screen widths above 800px, that same CSS selector calls a different version of the background image which weighs in at 60k.

    My question is, as the whole stylesheet gets downloaded before rendering the page, does that 60k image load on mobile, even though it won’t be displayed? Or does that only load for screen sizes above 800px?

    Thanks in advance

    # April 7, 2013 at 10:10 am

    this page describes many situations
    http://timkadlec.com/2012/04/media-query-asset-downloading-results/

    if you are using a media query to just change the background property at a certain width then no it doesnt get downloaded until the width requirement is met(test 5 in the article)

    # April 7, 2013 at 11:39 am

    Thanks @pixelgrid that is exactly what I was after, and excellent article (bookmarked!)

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".