Docs

[Blade]

Hello!

I’ve read some old threads, and from what I understand, the background image isn’t responsive, unless I add some additional CSS code?

On our homepage (https://unbanster.com), on the background image, those 2 characters from right and left remain static, and they won’t show up on mobile devices, and on my laptop they are cut off and look pretty bad.

If I need additional CSS for that, what will the proper code be nowadays?

We have the latest theme version.

Thank you!

[Darshana]

Hi there,

Thanks for writing in! Can you please try adding this under Custom > CSS in the Customizer.

.home .x-section.bg-image {
    background-position: unset !important;
    background-size: contain;
}

Hope that helps.

[Blade]

Hello!

It works, kind of :). It makes the image responsive, but pushes down the content in that section, as you can observe in image number 1 that I attached. It should usually look like it’s displayed in the image number 2.

[Nabeel A]

Hi again,

The only thing you can do is to give the background color if you want to display the full background image, so the text remains in the container.

.home #x-section-1.x-section.bg-image {
    background-position: unset !important;
    background-size: contain;
    background-color: #CEA973 !important;
}

Hope this helps!

[Author]

Posts