| <!DOCTYPE html> |
| <style> |
| #container { |
| position: absolute; |
| width: 600px; |
| height: 550px; |
| } |
| .test { |
| backface-visibility: hidden; |
| position: absolute; |
| width: 10%; |
| height: 8%; |
| } |
| .image { |
| background-image: url(../resources/small-apple.jpg); |
| top: 0px; |
| } |
| .generated { |
| background-image: linear-gradient(blue, green); |
| top: 100px; |
| } |
| .size-cover { |
| background-size: cover; |
| left: 50px; |
| } |
| .size-contain { |
| background-size: contain; |
| left: 100px; |
| } |
| .fixed-height { |
| background-size: auto 30px; |
| left: 150px; |
| } |
| .percent-height { |
| background-size: auto 50%; |
| left: 200px; |
| } |
| .top { |
| background-position: left 0px top 10px; |
| left: 250px; |
| } |
| .bottom { |
| background-position: left 0px bottom 10px; |
| left: 300px; |
| } |
| .center { |
| background-position: center; |
| left: 350px; |
| } |
| .no-repeat { |
| background-repeat: no-repeat; |
| left: 400px; |
| } |
| .repeat-space { |
| background-repeat: space; |
| left: 450px; |
| } |
| .repeat-round { |
| background-repeat: round; |
| left: 500px; |
| } |
| </style> |
| <div id="container"> |
| <div class="test image"></div> |
| <div class="test image size-cover"></div> |
| <div class="test image size-contain"></div> |
| <div class="test image fixed-height"></div> |
| <div class="test image percent-height"></div> |
| <div class="test image top"></div> |
| <div class="test image bottom"></div> |
| <div class="test image center"></div> |
| <div class="test image no-repeat"></div> |
| <div class="test image repeat-space"></div> |
| <div class="test image repeat-round"></div> |
| <div class="test generated"></div> |
| <div class="test generated size-cover"></div> |
| <div class="test generated size-contain"></div> |
| <div class="test generated percent-height"></div> |
| <div class="test generated top"></div> |
| <div class="test generated bottom"></div> |
| <div class="test generated center"></div> |
| <div class="test generated no-repeat"></div> |
| <div class="test generated repeat-space"></div> |
| <div class="test generated repeat-round"></div> |
| </div> |