Background Image for mobile

[shizane]

I have my Background image in “Background Upper layer” set to Cover / Center for desktop but how do you adjust the position/size for mobile? I’m guessing I’d need some CSS…

This is just in the first section on the homepage (the banner).

Found this in another topic…im guessing i need to replace the page ID and “band-2” ? If so where is the page ID?

@media(max-width: 767px){
    .page-id-16358 #x-content-band-2 {
        background-position: 70% !important;
    }
}

Cheers.

[rad]

Hi Shane,

Thanks for reaching out.

It’s almost correct, the selector should be different and like this

@media(max-width: 767px){
    $el .x-bg-layer-upper-image {
        background-position: 70% !important;
    }
}

And you have to add it within the section’s Element CSS.

Hope this helps.

[shizane]

That worked beautifully! Cheers!

[jade]

Hi Shane,

You may also read more about the Element CSS feature here:

Element CSS | Themeco Docs

Glad to hear it’s sorted.

[sebagc]

Im sorry to interrupt your conversation.
I used this code and worked perfect.
Is there a way to edit the position vertically also?
Thanks!!

[lely]

Hi @sebagc,

Yes, see this complete guide for background.

@media(max-width: 767px){
    $el .x-bg-layer-upper-image {
        background-position: 70% 50% !important;
    }
}

Adjust the position accordingly.

Hope this helps.