| <!DOCTYPE html> |
| <style> |
| body { |
| margin: 0; |
| overflow: hidden; |
| } |
| |
| div { |
| background-image: |
| url(resources/SquirrelFish.svg), |
| url(../../block/positioning/resources/icon-gold.png), |
| url(resources/flower.jpg), |
| linear-gradient(to bottom right, black, transparent, black); |
| background-repeat: no-repeat; |
| border: solid; |
| margin: 2px; |
| float: left; |
| background-color: lightblue; |
| } |
| |
| div.landscape { |
| width: 390px; |
| height: 140px; |
| } |
| |
| div.portrait { |
| width: 190px; |
| height: 290px; |
| } |
| |
| div.contain { |
| background-size: contain; |
| } |
| |
| div.cover { |
| background-size: cover; |
| } |
| |
| div.contain-cover { |
| background-size: contain, cover; |
| } |
| |
| div.cover-contain { |
| background-size: cover, contain; |
| } |
| |
| </style> |
| <div class="landscape contain"></div> |
| <div class="landscape contain-cover"></div> |
| <div class="landscape cover"></div> |
| <div class="landscape cover-contain"></div> |
| <div class="portrait contain"></div> |
| <div class="portrait contain-cover"></div> |
| <div class="portrait cover"></div> |
| <div class="portrait cover-contain"></div> |
