image-orientation-background-properties.html (1241B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Images Module Level 3: image-orientation with background properties</title> 6 <link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> 7 <link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> 8 <link rel="match" href="reference/image-orientation-background-properties-ref.html"> 9 <meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-313"> 10 <style> 11 div { 12 position: absolute; 13 width: 200px; 14 height: 200PX; 15 background-image: url(support/exif-orientation-5-lu.jpg); 16 background-repeat: no-repeat; 17 } 18 19 .repeat { 20 background-repeat: repeat; 21 top: 20px; 22 left: 20px; 23 } 24 25 .position { 26 background-position: bottom right; 27 top: 20px; 28 left: 240px; 29 } 30 31 .cover { 32 background-size: cover; 33 top: 240px; 34 left: 20px; 35 } 36 37 .contain { 38 background-size: contain; 39 top: 240px; 40 left: 240px; 41 } 42 </style> 43 </head> 44 <body> 45 <div class="repeat"> 46 </div> 47 <div class="position"> 48 </div> 49 <div class="cover"> 50 </div> 51 <div class="contain"> 52 </div> 53 </body> 54 </html>