Archived topic
how to display background image good in more than one ratio?
3 replies · Started by Krystian on July 13, 2018
Hello, my problem is with background image for section.
On my original display with aspect ratio 16:9 image look ok - but on my second screen with aspect ratio 16:10 images looks a little bit cut. I have top padding 500 and bottom padding 500 in almost every picture. Is it possible to write something more universal than straight numbers.
Do you have any solution how to fix it?
Hi there,
you can try using %'s instead of pixels in the Section padding options.
Work out the ratio of your original image, and divide the vertical by the horizontal. e.g 16:9 = 9 divided by 16 = 56%. If you apply this as padding (28% top and bottom) then this should maintain the original aspect ratio. It may take some tweaking.
Great! ;) its working!
But how to calculate it when I have couple lines of text on this photo?
Glad to hear that.
That is more complicated, especially if the content is variable in size, you could either estimate the % as you have done. Or target each section with some CSS and then use a calc variable to eliminate the height of the content e.g:
#generate-section-7 .generate-sections-inside-container {
padding-top: calc( 33% - 185px);
padding-bottom: calc( 33% - 185px);
}