I am not in any way a front-end dev, but I am writing a simple one-page website which contains an image. I have create few versions of this image to minimize the bits to be downloaded in small-screen devices. This image is supposed to be "expanded" horizontally, so I also created some background images which are supposed to be repeated horizontally. See below mockup:

[![mockup](https://i.stack.imgur.com/Wk00V.png)](https://i.stack.imgur.com/Wk00V.png)

Below the code which I wrote. Is this the correct approach? Is there any bug in my code or is this the correct way to use viewports? Although it works fine on my 320px iPhone screen, I can't get the 320px version to work on my desktop browser. Overall I am not satisfied.

**HTML:**

```
<div id="image" class="fluid-container">
  <center>
    <picture id="banner">
      <source media="(max-width: 320px)" srcset="320w.jpg">
      <source media="(min-width: 1200px)" srcset="1200w.jpg">
      <source media="(min-width: 800px)" srcset="800w.jpg">
      <source media="(min-width: 480px)" srcset="480w.jpg">
      <img src="800w.jpg">
    </picture>
  </center> 
</div>

```

**CSS:**

```
<style>
    #image {
      background-image: url("r320w.png");
      background-repeat: repeat;
    }
    @media (min-width: 480px) {
      #image {
        background-image: url("r480w.png");
        background-repeat: repeat;
      }
    }
    @media (min-width: 800px) {
      #image {
        background-image: url("r800w.png");
        background-repeat: repeat;
      }
    }
    @media (min-width: 1200px) {
      #image {
        background-image: url("r1200w.png");
        background-repeat: repeat;
      }
    }
</style>

```