The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed