Menu icon Foundation
Interchange for Background image URL?

Hi,
Does the new interchange have the ability to target Background Image URLs? (background-image:url('image.gif')

if Possible, what is the best method of achieving this?

and Cheers for the launch of Foundation 5, was waiting desperately for this. You guys Rock!!!

interchangebackground Image

Hi,
Does the new interchange have the ability to target Background Image URLs? (background-image:url('image.gif')

if Possible, what is the best method of achieving this?

and Cheers for the launch of Foundation 5, was waiting desperately for this. You guys Rock!!!

Xandros almost 6 years ago

Why not simply use a media query or the provided mixins ?

Asif almost 6 years ago

before interchange we depended on media queries and stuff anyways, interchange gives a whole new flexibility. but I think interchange targets the src of an image, similarly if there was a switch of some sort where it could target the background: url as well, it would then be a lot easier to implement than using media queries. the whole idea of using interchange is because it makes things easier.

This also helps big time when you are generating the HTML code dynamically for backgrounds, if we use media queries we might have to dynamically add in the style to the CSS for each div tag for instance, which might not be the right way to go. In that situation I would then want to keep the CSS as it is with the other styling and have the URLs of different background images for different devices in the Tag itself. That would make life a lot easier for developers is my thought process.

Alex Plaza over 5 years ago

and that's the Why.

interchange for inline background images pls!

Martin Kearn over 5 years ago

The other big advantage to interchange is that it only makes a single http request rather than one for each image which media queries would do. This makes your site lighter and faster.

+1 on this feature request! :)

Matt Dean over 5 years ago

2nd this for single http image requests.

Karl Ward over 5 years ago

I am really not sure what you guys mean "single http request". If using CSS, a single request will be made for an image in a given media query that fits the current device ... no more no less. If integrated with interchange, it will also be a single request, although it will require javascript ... Why would you want to do this with javascript and interchange when its perfectly simple and straight-forward in CSS?

Salvatore Tolve almost 4 years ago

This could be done just by using media queries in the CSS. The interchange is essentially doing the same thing but with on page elements.

Being that 'background-image' is a CSS property, you would just do something like the following to target the element and switch it based on size (like interchange):

@media only screen and (max-width: 40em) {
  .bg {
    background: url('img/small-img.jpg');
  }
}

@media only screen and (min-width: 40.063em) {
  .bg {      
     background: url('img/medium-img.jpg');
  }
}

The reason to use interchange is solely to not show/hide all the images on the same page like you're forced to do in Bootstrap. With using the media queries you are only loading the image when it hits the break point (http://foundation.zurb.com/docs/media-queries.html).

J almost 4 years ago

@Salvatore Tolve

Like @Asif's post over 2 years ago, media queries wouldn't solve this issue when the image is controlled or generated through a CMS.