image-orientation-background-properties-ref.html (1112B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Images Module Level 3: image-orientation with background properties reference</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 <style> 9 div { 10 position: absolute; 11 width: 200px; 12 height: 200PX; 13 background-image: url(../support/exif-orientation-5-lu-pre-rotated.jpg); 14 background-repeat: no-repeat; 15 } 16 17 .repeat { 18 background-repeat: repeat; 19 top: 20px; 20 left: 20px; 21 } 22 23 .position { 24 background-position: bottom right; 25 top: 20px; 26 left: 240px; 27 } 28 29 .cover { 30 background-size: cover; 31 top: 240px; 32 left: 20px; 33 } 34 35 .contain { 36 background-size: contain; 37 top: 240px; 38 left: 240px; 39 } 40 </style> 41 </head> 42 <body> 43 <div class="repeat"> 44 </div> 45 <div class="position"> 46 </div> 47 <div class="cover"> 48 </div> 49 <div class="contain"> 50 </div> 51 </body> 52 </html>