<div class="el"></div>
* {
box-sizing: border-box;
}
body {
margin: 0;
background: linear-gradient(to right, red, blue);
background-position-x: 0;
animation: size 3s infinite linear;
}
@keyframes size {
to {
background-position-x: 100vw;
}
}
.el {
width: 100vw;
height: 100vh;
padding: 1rem;
background-image: url(https://images.unsplash.com/photo-1528287942171-fbe365d1d9ac?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&w=1200&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
background-size: cover;
background-position: center;
mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/chris-mask.png);
mask-size: contain;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.