<!DOCTYPE html> | |
<style> | |
div { | |
background-image: radial-gradient(red, yellow, green); | |
background-repeat: no-repeat; | |
border: solid 1px black; | |
margin: 10px; | |
} | |
.horizontal { | |
background-size: auto 50%; | |
width: 200px; | |
height: 100px; | |
} | |
.vertical { | |
background-size: 50% auto; | |
width: 100px; | |
height: 200px; | |
} | |
</style> | |
<div class="horizontal"> | |
</div> | |
<div class="vertical"> | |
</div> |