[Resolved] how to display background image good in more than one ratio?

Home Forums Support [Resolved] how to display background image good in more than one ratio?

Home Forums Support how to display background image good in more than one ratio?

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #622741
    Krystian

    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?

    GeneratePress 2.1.3
    GP Premium 1.6.2
    #622767
    David
    Staff
    Customer Support

    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.

    #622806
    Krystian

    Great! 😉 its working!

    But how to calculate it when I have couple lines of text on this photo?

    #622818
    David
    Staff
    Customer Support

    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);
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.