Docs

[davidferp]

Hello X Team,

In my site I’ve a couple of sections with greenish background images that do not scale as I want to.

These images are PNG with irregular top and bottom borders that I would like to show. However, when selected as backgrounds they are displayed with widths constrained to the section width and height according to their aspect ratio.

Is there a way to constrain the height of the background image to the section height and let the width according to the image aspect ratio, even if that means that part of the left and right extremes of the image do not show?

I know it is a bit complex, I hope I make sense. Otherwise let me know.

Thank you very much in advance for your patience

[davidferp]

This reply has been marked as private.

[Nico]

Hi There,

Thanks for writing in.

Please try adding min-height to your section style. eg min-height:200px

Let us know how it goes.

Thanks.

[davidferp]

Hi Nico,

Thank you for your proposal.

I added the style you noted to the first section and of course now the top and bottom borders of the background image are visible, but only because the section is higher. And the background image seems to be stretched beyond the original dimensions, it appears a bit blurry… . Is is possible to dynamically reduce the height of the background image itself for other screen sizes in CSS? (for mobile, the current height of this image in section 1 is not appropriate).

Thanks you!

[Jade]

Hi David,

Please try this code in the custom CSS:

.home #x-section-1,
.home #x-section-3 {
    background-size: contain !important;
}

Hope this helps.

[davidferp]

Hello there,

Thank you for pointing me in the right direction. You guys are awesome!

I’ve been playing around with ‘background-size’ and ‘cover’ is the value that best works for me. Still, for small screens the backgrounds do not show as much as I would like. I think I will end up defining multiple backgrounds for different screen widths and see how it looks.

Thanks for making of X the best supported WP theme around!

[Rue Nel]

Hello There,

You’re welcome! We’re happy to help you out.
If you need anything else we can help you with, don’t hesitate to open another thread.

For more information how background image works, please check this topic: https://community.theme.co/forums/topic/section-background-image-2/#post-691126

Hope this helps.

[Author]

Posts