How do I add different sizes of the same image to a homepage banner in my media queries when the banner image is stored in javascript?

Question

This is where my banner image is stored, in the javascript:

```

/*
    Background slideshow
*/
$('.top-content').backstretch("assets/img/backgrounds/Banner_1024 x 768.jpg");
$('.testimonials-container').backstretch("assets/img/backgrounds/testimonial1.jpg");

$('a[data-toggle="tab"]').on('shown.bs.tab', function(){
$('.testimonials-container').backstretch("resize");
});

```

I want to add another version of the banner image for mobile and other screen sizes. Do I add them in the javascript here? How do I link everything in my media queries?

Answer 1

You are using the jQuery plugin, Backstretch.

A quick look at the documentation at https://github.com/jquery-backstretch/jquery-backstretch shows that this is a built in feature. Just pass an array of images and widths.

// Or, to automatically choose from a set of resolutions.
// The width is the width of the image, and the algorithm chooses the best fit.
$(".foo").backstretch([
  [
    { width: 1080, url: "path/to/image1_1080.jpg" },
    { width: 720, url: "path/to/image1_720.jpg" },
    { width: 320, url: "path/to/image1_320.jpg" }
  ]
]);