Menu icon Foundation
Interchange and background images?

I'm relatively new to Foundation and am still trying to wrap my head around some things. Is there a way, using Interchange, to control which, if any, background images get loaded based on the breakpoint?

In my case, I have a background image that I want to display for "large" screens, but for "medium" and "small" devices, I don't want to display, or have downloaded, any image at all.

I know I can use a basic media query to control which image, if any, gets displayed, but unless I'm mistaken, all images would still be downloaded to the device regardless of whether an image is being shown or not. This is what I hope to avoid. I would prefer that phone and tablet devices not have to download my background image at all since I only want it used on large screens.

Thanks!
James

interchangebackgroundimagecss

I'm relatively new to Foundation and am still trying to wrap my head around some things. Is there a way, using Interchange, to control which, if any, background images get loaded based on the breakpoint?

In my case, I have a background image that I want to display for "large" screens, but for "medium" and "small" devices, I don't want to display, or have downloaded, any image at all.

I know I can use a basic media query to control which image, if any, gets displayed, but unless I'm mistaken, all images would still be downloaded to the device regardless of whether an image is being shown or not. This is what I hope to avoid. I would prefer that phone and tablet devices not have to download my background image at all since I only want it used on large screens.

Thanks!
James

This post has been closed. No new replies can be added.

Karl Ward over 4 years ago

I believe if you use a media query, a background image will only load if it is supposed to display. For sure, plain CSS media queries is the way to handle your background images.

I would just make sure you have a "mobile first" approach, to make sure a background image is not loaded by default:

.my-element {
   // small background-image or nothing to be loaded by default
   background-image:url('small.png');
   @media #{$large-up} {
      // load background image for large
      background-image:url('large.png');
   }
}

Interchange basically exists because you can't use CSS media queries to manage image sources.

Brandon Arnold over 4 years ago

With Karl's method the large screen will still load both, but the small screen will only load the small image. This is usually ok, as your desktops most likely have a quick connection and the small image load shouldn't effect it too much. If you'd like to prevent that, however, you can do a small-only media-query for the small screen as well.