Side by side parallax images while keeping aspect-ratio - html

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>

Answer 2

As avcajaraville pointed out, the best approach is to have a container for the images with position fixed.
Here is my solution, using this idea, but working without needing size adjustments
Note that since now the images cover only half the width of the screen, they will cover also half the height. This could be fixed having images in portrait mode. To get a more nice result with the current images, I have added another row of images, now with the order reversed (visible only for some screen ratios)
.images {
position: fixed;
width: 100%;
z-index: -1;
}
.images div {
display: inline-block;
width: 49%;
margin: 0;
height: 500px;
background-position: center;
background-size: cover;
}
.image-left {
background-image: url('https://www.gstatic.com/webp/gallery/1.webp');
}
.image-right {
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;
}
.filler {
height: 500px;
}
<div class="images">
<div class="image-left"></div>
<div class="image-right"></div>
<div class="image-right"></div>
<div class="image-left"></div>
</div>
<div class="content">
<h1>Lorem</h1>
</div>
<div class="filler"></div>
<div class="content">
<h1>Ipsum</h1>
</div>

Answer 3

.flexrow {
display: flex;
flex-flow: row wrap;
}
.flexrow > .image {
flex: 0 1 50%;
min-height: 350px;
background-size: 100%;
}
.img1 {
background-size: cover;
background: url('https://www.gstatic.com/webp/gallery/1.webp') no-repeat center center fixed; ;
}
.img2 {
background-size: cover;
background: url('https://www.gstatic.com/webp/gallery/2.webp') no-repeat center center fixed; ;
}
.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="flexrow">
<div class="image img1"></div>
<div class="image img2"></div>
</div>
<div class="content">
<h1>Ipsum</h1>
</div>
think this is what you're looking for, remember that min-height property on images may break this aspect ratio when no space are available (on resize, low res).