css background-image stretching on transition with different image sizes

Question

I want my background-image with a smooth transition. When it has a different aspect-ratio predecessor. Here you'll see a example of this stretching effect.

 toggle = true jQuery(document).ready(function() { jQuery(".button").on("click", function() { if (toggle) { jQuery(".test").css("background-image", "url('https://images.pexels.com/photos/4534200/pexels-photo-4534200.jpeg?cs=srgb&dl=pexels-arthouse-studio-4534200.jpg&fm=jpg')") toggle = false } else { jQuery(".test").css("background-image", "url('https://images.unsplash.com/photo-1547922374-968968e3f658?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&dl=bosco-shots-SlR66yjPsoI-unsplash.jpg')") toggle = true } }) })

 * { margin: 0; padding: 0; } .test { width: 100vw; height: 100vh; background-image: url('https://images.unsplash.com/photo-1547922374-968968e3f658?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&dl=bosco-shots-SlR66yjPsoI-unsplash.jpg'); transition: background-image 0.5s; -webkit-transition: background-image 0.5s; -o-transition: background-image 0.5s; -moz-transition: background-image 0.5s; -ms-transition: background-image 0.5s; background-position: center center; background-size: cover; background-repeat: no-repeat; } .button { padding: 2px; background-color: red; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div class="test"> <input class="button" type="button" value="change"> </div>

If anyone could show me an option, where I can still use background-size: cover; , and a background-image transition, it would help me a lot.

Answer 1

Instead of toggling the background image you can have multiple elements with a background and show the active element based on an index.

The remainder operator (%) for the (active) index makes sure we always have a valid index that never exceeds the amount of backgrounds we have.

 let active = 0; // First element is active jQuery(document).ready(function($) { $(".button").on("click", function() { // Update active index active = (active + 1) % $(".bg").length; // Show active background $(".bg").each(function(index) { if(index === active) { $(this).addClass("bg-active"); }else{ $(this).removeClass("bg-active"); } }); }) })

 * { margin: 0; padding: 0; } .test { width: 100vw; height: 100vh; position: relative; } .test > * { position: relative; /* Make sure elements inside `.test` dont disappear behind the background(s) */ } .bg { position: absolute; left: 0; top: 0; bottom: 0; right: 0; opacity: 0; transition: opacity 0.5s; background-position: center center; background-size: cover; background-repeat: no-repeat; } .bg-nature { background-image: url('https://images.pexels.com/photos/4534200/pexels-photo-4534200.jpeg?cs=srgb&dl=pexels-arthouse-studio-4534200.jpg&fm=jpg'); } .bg-art { background-image: url('https://images.unsplash.com/photo-1547922374-968968e3f658?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&dl=bosco-shots-SlR66yjPsoI-unsplash.jpg'); } .bg-active { opacity: 1; } .button { padding: 2px; background-color: red; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div class="test"> <div class="bg bg-nature bg-active"></div> <div class="bg bg-art"></div> <input class="button" type="button" value="change"> </div>