Docs

[Vinyl21]

Hello,

I have set a background image on my site. The image looks good on one screen size, but part of the image gets cut off on larger screen sizes.

Can you help with this?

Thanks.

[Thai]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Vinyl21]

This reply has been marked as private.

[Jade]

Hi there,

Please add this code in the customizer:

@media (max-width: 767px) {
    .home .x-section.bg-image {
        background-position: inherit !important;
    }
}

Hope this helps.

[Vinyl21]

This reply has been marked as private.

[Nico]

Hi There,

The CSS is not applied. Would you mind sharing us your admin credentials so we could check your setup closer.

Don’t forget to set it as private reply.

Thanks.

[Vinyl21]

This reply has been marked as private.

[Rupok]

Hi there,

I have checked your site and can’t see the suggested code under your Customizer. Did you remove them or didn’t add? Let’s add and let us know how it goes.

Thanks!

[Vinyl21]

This reply has been marked as private.

[Lely]

Hi There,

Do you mean small screen size? I can see the CSS is working. See this:
Too much padding is not advisable on smaller screen. You may update previous CSS to this:

@media (max-width: 767px){
.home .x-section.bg-image {
     padding: 45px 0 !important;
    background-position: center center !important;
}
}

Hope this helps.

[Vinyl21]

This reply has been marked as private.

[Friech]

Hi There,

Should it not automatically re-size based on the screen size?

No it does not, Image element does. Please follow this posts on how background image works.

– https://community.theme.co/forums/topic/background-image-not-responsive-2/?replyto=628487#post-628693

– https://community.theme.co/forums/topic/background-image-on-phone/#post-780991

Also, can you please tell me how to make the text responsive. I tried to use the Selector tool and it did not work.

You did use the selector tool but you did not apply the class on the header. Please apply the class on your header.

.e.g.
<h3 style="text-align: left;" class="resp-h3"><span style="color: #ffffff;">Range of accessories!</span></h3>

Then use that class on your responsive text settings as the selector. Play with the compression, max-size and min-size until you get the desired look.

Let us know how it goes.

Cheers!

[Vinyl21]

This reply has been marked as private.

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

.x-section.bg-image.parallax {
    background-size: 100% !important;
}

Hope that helps

Joao

[Author]

Posts