-
Posts
-
Hi guys,
I came across an issue where I am trying to use a background image in a color section. The problem is that the image gets stretched beyond the width of the screen with the paralax setting no matter what I do.
I came accross this thread: https://kriesi.at/support/topic/parallax-images-stretched-way-beyond-screen-dimensions/
I implemented the solution in the quick CSS but to no avail. The image is still stretched. I even tried to resize the image to 1500 x 640 and use the same setting when adding the image as the background. I just cannot seem to get it just right to have the width of my image take up 100% of the width of the screen.
The funny thing to me is that when I change from paralax to fixed then the 1500 x 640 image is to small for the screen and does not stretch to the end. I’m pretty sure this is some CSS thing that I am missing.
URL: http://www.buylucerne.co.za
Any help will be appreciated.
Thanks
JI got the image to at least display correctly now with the “Scroll” background attachment setting and the “Stretch to Fit” background setting. The only problem is now it does not have the parallax effect and this is what I want. In short, I want the image to display exactly as it is displayed now on the site but along with the parallax effect when scrolling. Is there any way I can achieve this?
Thanks for your help.
Hi!
Thank you for using Enfold.
The image overflows outside the color section because it is applied in another container called “av-parallax”. This container is taller than the actual color section which is necessary in order to generate the parallax effect. We can set the background size property of this container to 100% but it will distort the image.
.av-parallax .avia-full-stretch { background-size: 100% 100% !important; }Cheers!
Ismael
- The topic ‘Background image on color section streched beyond screen size’ is closed to new replies.