Side by side parallax images while keeping aspect-ratio

Question

I am trying to accomplish placing two parallax background-images side by side while keeping their aspect ratio. The issue I am running into is that each image appears to be getting cut in half vertically. I have tried using different values in both background-attachment and background-size to no avail. Removing background-attachment: fixed; from the code below fixes the aspect-ratio issue but loses the parallax effect. Does anyone know how to accomplish both simultaneously?

.image-left {
  width: 50%;
  float: left;
  height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: none;
  background-size: cover;
  background-image: url('https://www.gstatic.com/webp/gallery/1.webp');
}

.image-right {
  width: 50%;
  float: left;
  height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: none;
  background-size: cover;
  background-image: url('https://www.gstatic.com/webp/gallery/2.webp');
}

.content {
  text-align: center;
  padding: 100px 30px;
  font-size: 1.25rem;
  color: #fff;
  background-color: orange;
}

<div class="content">
  <h1>Lorem</h1>
</div>

<div class="image-left"></div>
<div class="image-right"></div>

<div class="content">
  <h1>Ipsum</h1>
</div>

Fiddle for above code here.

I have also attempted to use the jQuery function from this post but was unable to get it to work with side by side images. (see fiddle)

$(window).scroll(function() {
  var scrolledY = $(window).scrollTop();
  $('#container').css('background-position', 'left ' + ((scrolledY)) + 'px');
});

Answer 1

As others pointed out, I don't think you can achieve your goal via background images...

So I tried another approach that consists basically on: - Having two sections: one for the images, another for the content. - As for the images, wrap them into an element and use position fixed. They are positioned at the very top of the element, should you want to change this, you can play with top property. - As for the content, both regions are also wrapped in a container with position absolute. - The content at the bottom will be responsible for the 'breathing' space in the images, so, you need to play with margin-top to achieve desired results.

Some considerations: - The given example works at the moment only on desktop, tested on fulls screen laptop (around 1680px width). - If you shrink the screen, everything goes really bad, thus, you will need to adjust all measures for mobile via media queries. - The bottom element have a min-height attribute just for demonstration purposes.

All given, I'm not quite sure if this is something I would recommend.

Can you actually merge both images into one? This way, you can just use the background approach, and this development would not be needed.

What I don't like about my approach, is that it contains a lot of fixed values on positions, and eventually, this would introduce maintainability issues.

I hope it helps!

.image-wrapper {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
}

.image {
  width: 100%;
}

.content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.content {
  text-align: center;
  padding: 100px 30px;
  font-size: 1.25rem;
  color: #fff;
  background-color: orange;
}

.content-bottom {
  margin-top: 300px;
  min-height: 1000px;
}

<div class="image-wrapper">
  <img class="image"  src="https://www.gstatic.com/webp/gallery/1.webp">
  <img class="image"  src="https://www.gstatic.com/webp/gallery/2.webp">
</div>

<div class="content-wrapper">
  <div class="content">
    <h1>Lorem</h1>
  </div>
  <div class="content content-bottom">
    <h2>Ipsum</h2>
  </div>
</div>