# Multiple Resolutions Demo

In order to change the image based on the resolution, we can specify a set of images for each item in the slideshow.
Each item specifies a `width` and a `url`, where the `width` is the minimum width of the screen for this specific image.
If we have an image of with 1920px, and we want it to be used between screen widths of 1280 and 1920, we'll specify a `width` of 1280.

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="jquery.backstretch.min.js"></script>
    <script>
        $.backstretch([
            [
                { "width": 1280, "url": "sample1_1920.jpg" },
                { "width": 960, "url": "sample1_1280.jpg" },
                { "width": 480, "url": "sample1_960.jpg" },
                { "width": 0, "url": "sample1_480.jpg" }
            ],
            [
                { "width": 1280, "url": "sample2_1920.jpg" },
                { "width": 960, "url": "sample2_1280.jpg" },
                { "width": 480, "url": "sample2_960.jpg" },
                { "width": 0, "url": "sample2_480.jpg" }
            ]
        ]);
    </script>