title: CSS retina and non retina media queries
body: <p>I am trying to set up a background image for my website according to different resolutions. I also want to include the retina media queries so that if a retina device accesses my site the proper image will be loaded. The thing is that I always get the highest resolution which is not retina of course... Here is my css</p>
  
  <pre><code> &lt;style&gt;
  
  
  #background
  {
      font-size: large;
      position: relative;
      top:50%;
      left:50%;
      color: white;
  
  }
  
    @media only screen and (min-device-width : 768px) and (max-device-width:1024px) and (orientation : landscape)and (-webkit-min-device-pixel-ratio: 2) 
  {
      #demo{
      width: 100%;
  
      min-height: 800px;
      background-size: 100%;
      background-repeat: no-repeat;
      position:absolute;
      background-image: url(demo_BG_1024@2x.png);
      background-color: rgb(0,0,0);
      }
  }
  
  @media screen and (min-width:1025px)
  {
      #demo{
      width: 100%;
  
      min-height: 800px;
      background-size: 100%;
      background-repeat: no-repeat;
      position:absolute;
      background-image: url(demo_BG_1024.png);
      background-color: rgb(0,0,0);
      }
  }
  
  @media screen and (max-width:1024px)
  {
      #demo{
      width: 100%;
  
      min-height: 800px;
      background-size: 100%;
      background-repeat: no-repeat;
      position:absolute;
      background-image: url(demo_BG_1024.png);
      background-color: rgb(0,0,0);
      }
  }
  
  @media screen and (max-width:720px)
  {
      #demo{
      width: 100%;
  
      min-height: 800px;
      background-size: 100%;
      background-repeat: no-repeat;
      position:absolute;
      background-image: url(demo_BG_720.png);
      background-color: rgb(0,0,0);
      }
  }
  
  @media screen and (max-width:320px)
  {
          #demo{
          width: 100%;
  
          height: 100%;
          background-size: 100%;
          background-repeat: no-repeat;
          position:absolute;
          background-image: url(demo_BG_320.png);
          background-color: rgb(0,0,0);
      } 
  }
  &lt;/style&gt;
  </code></pre>