body{
-webkit-animation:zoom 5s infinite;
animation:zoom 5s infinite;
background:url(https://picsum.photos/1900/1900/?random) center center fixed no-repeat;
}
@-webkit-keyframes zoom{
0%,100%{
background-size:100%;
}
50%{
background-size:125%;
}
}
@keyframes zoom{
0%, 100%{
background-size:100%;
}
50%{
background-size:125%;
}
}
<style>
.zoom {
padding: 50px;
background-color: green;
transition: transform .2s; /* Animation */
width: 200px;
height: 200px;
margin: 0 auto;
}
.zoom:hover {
transform: scale(1.5); /* (150% zoom)*/
}
</style>
<div class="zoom"></div>
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}
#example2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 300px 100px;
}
/* One way */
background-size: cover;
/* Other option */
background-size: contain;