image-orientation-background-properties-border-radius.html (1252B)
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-border-radius-ref.html"> 9 <meta name=fuzzy content="0-3;0-331"> 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 border-radius: 5px; 18 } 19 20 .repeat { 21 background-repeat: repeat; 22 top: 20px; 23 left: 20px; 24 } 25 26 .position { 27 background-position: bottom right; 28 top: 20px; 29 left: 240px; 30 } 31 32 .cover { 33 background-size: cover; 34 top: 240px; 35 left: 20px; 36 } 37 38 .contain { 39 background-size: contain; 40 top: 240px; 41 left: 240px; 42 } 43 </style> 44 </head> 45 <body> 46 <div class="repeat"> 47 </div> 48 <div class="position"> 49 </div> 50 <div class="cover"> 51 </div> 52 <div class="contain"> 53 </div> 54 </body> 55 </html>