Bild in mehreren Versionen

• salzburg.jpg 1353x461 Auflösung, 248K Dateigröße
• salzburg_1.5x.jpg 2706x922 Auflösung, 500K Dateigröße
• salzburg_2x.jpg 2706x922 Auflösung, 832K Dateigröße
• salzburg_3x.jpg 4059x1383 Auflösung, 1.5MB Dateigröße
• salzburg_4x.jpg 5412x1844 Auflösung, 2.4MB Dateigröße

der HTML Code

<div id='bild'></div>

der CSS Code

      div#bild { 
        width: 1353px;
        height: 461px;
        background-size: cover;
        background-position: top;
        background-image: url(salzburg.jpg);
      }

      @media screen and (min-resolution: 1.5dppx) {
        div#bild { background-image: url(salzburg_1.5x.jpg); }        
      } 
      @media screen and (min-resolution: 2dppx) {
        div#bild { background-image: url(salzburg_2x.jpg); }        
      } 
      @media screen and (min-resolution: 3dppx) {
        div#bild { background-image: url(salzburg_3x.jpg); }        
      }
      @media screen and (min-resolution: 4dppx) {
        div#bild { background-image: url(salzburg_4x.jpg); }        
      }