<!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>