Can I fix a background-image to its parent?

Question

I'm making a carousel/slider and want to center the images. When I use background-position: center; they get stretched when I change the width. Can't figure out how to center the images and not stretch them when changing width.

I found out that if I use background-attachment: fixed; and background-position: center; It looks like what I want. But the pictures scroll with the page. How can I fix this?

Here's my codepen

const images = [
  "https://daimarubesso.com/assets/image/top/top_visual1_1.jpg",
  "https://daimarubesso.com/assets/image/top/top_visual1_2.jpg",
  "https://daimarubesso.com/assets/image/top/top_visual1_3.jpg",
  "https://daimarubesso.com/assets/image/top/top_visual1_4.jpg",
  "https://daimarubesso.com/assets/image/top/top_visual1_5.jpg",
  "https://daimarubesso.com/assets/image/top/top_visual1_6.jpg",
  "https://daimarubesso.com/assets/image/top/top_visual1_7.jpg",
  "https://daimarubesso.com/assets/image/top/top_visual1_8.jpg",
  "https://daimarubesso.com/assets/image/top/top_visual1_9.jpg",
  "https://daimarubesso.com/assets/image/top/top_visual1_10.jpg"
];
var currentImgIndex = 0;
var futureImgIndex = 1;

function switchBackground() {
  $('.current').toggleClass('shrink'); // slide the image to the left

  setTimeout(() => { // after sliding is done and we cant see the old image; switch the currentImage with the one that was the background image.
    currentImgIndex = (currentImgIndex + 1) % images.length;
    futureImgIndex = (futureImgIndex + 1) % images.length;

    $('.current').css('background-image', 'url("' + images[currentImgIndex] + '")');
    $('.future').css('background-image', 'url("' + images[futureImgIndex] + '")');

    $('.current').toggleClass('shrink'); // reset the sliding animation after the new image is set
  }, 600); // image switch is delayed 600ms because the sliding animation takes that long
}

setInterval(switchBackground, 4000);

.carousel {
  position: relative;
  width: 50rem;
  height: 50rem;
  margin-top: 12.5vh;
  border-radius: 0.25rem;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  margin-bottom: 200vh;
}

.slide {
  background-repeat: no-repeat;
  
  background-attachment: fixed; 
  background-position: center;
  /*
by using these two settings above it looks like how i want. But the scroll is fucked. If i dont use them the shrinking-image stretches/moves */

  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: inherit;
}

.current {
  background-image: url("https://daimarubesso.com/assets/image/top/top_visual1_1.jpg");
}

.current.shrink {
  width: 0;
  transition: all 600ms cubic-bezier(0.30005, 0.25, 0.05, 1);
}

.future {
  background-image: url("https://daimarubesso.com/assets/image/top/top_visual1_2.jpg");
}

<center>
  <div class="carousel">
    <div class="slide future"></div>
    <div class="slide current"></div>
  </div>
</center>

Tried moving the pictures with background-position, tried using tags instead, I'm stuck :c.

Every comment appreciated, thanks.

Answer 1

Try background-attachment: scroll;:

JSFiddle