Adding Parallax Scrolling To Debut Slideshow image Causes it to be stretched.

motorangutan
Tourist
9 0 2

I'm using this to create a parallax effect when scrolling down the page.  I'm using Debut theme.  

I've added:

.slideshow__image {
  background-attachment: fixed; 
}

 

It sort of works.  The issue is that the image becomes large and distorted.  I've tried playing with the background size a bit and found setting it to contain will fix the size issue, but then it leave the slideshow image with a large gap on top.   

 

Any ideas are appreciated!

KetanKumar
Shopify Partner
18836 1978 6977

@motorangutan 


Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
motorangutan
Tourist
9 0 2

store-motorangutan.myshopify.com

0 Likes
KetanKumar
Shopify Partner
18836 1978 6977

@motorangutan 

can you please share further issue images?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
motorangutan
Tourist
9 0 2

@KetanKumar 

THe slideshow image gets stretched when I add background-position: fixed;.   It makes the image too large and distorted.  It is possible to shrink the image back to the same size it is when background-position is turned off?

 

Screenshot from 2021-05-07 08-50-35.jpgScreenshot from 2021-05-07 08-53-14.jpg

 

KetanKumar
Shopify Partner
18836 1978 6977

@motorangutan 

please check demo

https://codepen.io/RenanB/pen/GZeBNg

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
motorangutan
Tourist
9 0 2

@KetanKumar 

 

Thanks for the link. However, that's much more advanced than I wanted to go.  I simply wanted the image to size correctly.  If I put background-width: 100% it fixes the size issue, but then I ended up with a gap at the top of the slide show.

 

Screenshot from 2021-05-07 11-13-09.jpg

0 Likes
KetanKumar
Shopify Partner
18836 1978 6977

@motorangutan 

maybe upload a bigger height image

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
motorangutan
Tourist
9 0 2

Thanks for the suggestion.  I experimented with the image size, but it did not change the behavior.  

0 Likes
KetanKumar
Shopify Partner
18836 1978 6977

@motorangutan 

oh sorry for this please start parallax effect code

https://www.w3schools.com/howto/howto_css_parallax.asp

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes