I am using a parallax effect and cannot get the size of the image to be acceptable. I have tried everything. Have others that work fine. Please take a look.
See image featuring the RING
Screenshot attached
Hello @windhover4,
Thanks for writing in!
The background image needs to cover the whole section. It will be automatically zoom in to make sure that there are enough image height to cover the section height as soon as you scroll the page. If you want to see a bigger image, the section height needs to be higher. Please edit your page and add some gap elements above and below the headline element in the column.
Hope this makes sense.
It appears that the background image 1200 x 728 does cover the “whole section.”
It appears to zoom too much and cuts out critical parts of the original image.
I do not find any way to make “the section height…higher.”
I have added gap elements above and below the headline element in the column.
Result remains flawed and nothing like the Parallax image several sections above on the same page.
Please take a look and assist. Thank you.
Hello @windhover4,
Without the gap elements, the total height of the section is only 275 pixels. Please increase the gap size to 250 pixels and you will have a total of 725 pixels. This should be decent enough to display a bigger image.
Your image dimension should be at least 1920x1080 or much more higher. The current image is only 1200. That means that in larger screens, the image will be stretch out giving the viewer a blurry image.
Hope this helps.
Thanks!
Resized the image to 1920 x 1080 (looked but could not find spec. for size).
Found size for gap and increased to 450 in an effort to get Captain’s Head to show with no luck.
Progress, but still not right.
Other suggestions?
Hello @windhover4,
Background image with people in it is not recommend in parallax settings because there will be times the parts of the person will be cut off. Please deactivate parallax setting in your section and see the result.
And by the way, I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.
We use the
background-image: cover;which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.
Yes we can use
background-size: 100% 100%;which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.
Yes we can also use
background-size: 100% auto;but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.
Or we can also use
background-size: contain;but then this is not a good choice because you will see white spaces around your image.
Please let us know how it goes.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.