Hi Guys,
I have a section background on a site I’m building I have an image as a section background (third section down called ‘How does it work?’. I have an image with text on it as a section background, but the larger the browser window the more the image is zoomed in and the image is cropped on the top and the bottom.
What is the best solution to contain the image so it behaves as a section background, or that I can have text elements sitting on top of it?
Any advice is welcome! Cheers
Hi @billy.rooney,
Thanks for reaching out.
It’s aspect ratio related, and similar to the video, when it doesn’t match the aspect-ratio of the video player, it will then displays black background to the empty area. But with background images, it crops the side instead of displaying empty spaces to fit the image in the layout dimension. So imagine if the sides have empty space, it will then stretch the height so the width increase until it fits the width of the container, but by also increasing the height, it overshoots to the top and bottom clipping it.
Now to explain it further, your section has narrow height but wider width. Hence, top and bottom will be clipped since it fits the width. The solution is uploading a narrow height with wider width image to match the aspect ratio. OR, use percentage padding in your section (top and bottom) so it would respond according to the content. There is no complete solution when it comes to the background since container changes as the content change.
Thanks!
Hi Rad,
That’s a really considered and articulate answer to my question, thank you for taking the time and thought to write it.
I’ll try the percentage padding as a potential solution. I’ve noticed on the latest Cornerstone update that the padding options seem to be missing on section backgrounds, would you mind pointing me in the direction to where it might be hiding?
Thanks again for your answer Rad, it’s the patient and swift responses to queries that keep me buying X Theme licences every time I build a website, you’re a credit to your team.
You’re most welcome.
We’re glad we were able to help you out.
Good good, can you tell me where the section padding options are in the new Cornerstone update are?
Has the section padding been removed from the standard X Theme and only put into Pro?
I upgraded the licence as I need to sort this out quickly, and the padding options are there.
Hi There,
Please toggle the Advanced Mode option under Preferences:
Regards!
OK cool, thanks a million for that!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.