<div>cross-fade()</div>
<div>Multiple background</div>

body {
  display: flex;
  width: 100vw;
  height: 100vh;
}

div {
  flex: 1;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4rem;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5), -2px -2px 0 rgba(0, 0, 0, 0.5);
}

div:nth-child(1) {
  background-image: -webkit-cross-fade(
    url("https://images.unsplash.com/photo-1566738780863-f9608f88f3a9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2378&q=80"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/221808/sky.jpg"),
    75%
  );
  background-image: cross-fade(
    url("https://images.unsplash.com/photo-1566738780863-f9608f88f3a9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2378&q=80"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/221808/sky.jpg"),
    75%
  );
  background-repeat: no-repeat;
}

div:nth-child(2) {
  background-image: -webkit-cross-fade(
    url("https://images.unsplash.com/photo-1566738780863-f9608f88f3a9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2378&q=80"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/221808/sky.jpg"),
    75%
  );
  background-image: url("https://images.unsplash.com/photo-1566738780863-f9608f88f3a9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2378&q=80"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/221808/sky.jpg");
  background-repeat: no-repeat;
}