[mateoserendipiaParticipant]

Hi,

I have a full-width section with a background image in it. I would like the section to adjust its height to the height of the image (so to show the entire image always, irrespective of the screen width).

At this moment the only way I have found to influence the height of the section is by setting it’s height in pixels (in the styling box), but this means the image is cropped the the top and the bottom at larger widths. I’ve tried things as ‘height: 100%’, ‘height: auto’ and ‘height: full”, but this doesn’t help.

I should perhaps add that I would like to be able to add other (text) elements in the section – as is normally possible with a background image.

Could you please help me to achieve this?

Thanks!

[JoaoModerator]

Hi There,

Please try adding:

height:100vh;

Let us know how it goes, if that does not work plese provide us the url of your website and point which specific section you are trying to achieve this.

Hope it helps

Joao

[mateoserendipiaParticipant]

This reply has been marked as private.

[ThaiModerator]

This reply has been marked as private.

[mateoserendipiaParticipant]

This reply has been marked as private.

[Nabeel AModerator]

Hi again,

Add this code in your Customizer to fix things:

.page-id-50 #x-section-1 {
    background-size: cover !important;
    padding-bottom: 36% !important;
}

Let us know how this goes!

[mateoserendipiaParticipant]

Hi,

Thanks – but no difference i’m afraid, the background picture is still being cropped…

Regards

[FriechModerator]

Hi There,

Add this inline CSS to the STYLE field on your section.

background-size: contain !important;

But this means the image won’t be able to cover your whole section. Please read this post and this on how the background-size contain and cover works.

You can make your background image more landscape oriented so it would be more fitted on the section, but still it will be cut off when the page is viewed on a portrait oriented screen like on mobile.

Let us know how do you want to proceed about this.

Thanks.

[mateoserendipiaParticipant]

Hi,

Thanks for the answer. I was aware of the ‘cover’ and ‘contain’ properties. But I thought there might perhaps be a way to have the container height (section height) be set as a percentage of the viewport width (vw). In that way the section would always be the height of the picture. But I can’t get that to work, so I guess thats not possible.

Thanks!

[ChristianModerator]

That is technically possible but would require custom development. You might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/

Thanks.

[Author]

Posts