[Resolved] Custom Mobile Backround Image

[Matt Stern]

Hi there,

I have a container with a background image set to “Full.” Is it possible to set the same image to “Contain” on mobile?

Thank you!

Matt

[Ying]

Hi Matt,

Do you mean cover when you say full?

Depends on if you are using pseudo element, you can add CSS to change the background-size to contain.

Eg.

@media (max-width: 768px) {
.block {
    background-size: contain;
}
}

or

@media (max-width: 768px) {
.block:before {
    background-size: contain;
}
}

Let me know if you need further assistance 🙂

[Matt Stern]

Oh, yes I meant “Cover”

So if I change it to Pseudo Element, I can use the css provided? Does “.block” apply to all blocks?

[Ying]

It’s just a general example.

You’ll need to switch the .blockwith the actual block ID, otherwise you won’t be able to override the original CSS.

And the CSS with:afteris for pseudo element background.

[Matt Stern]

Thanks, Ying, that worked.

[Ying]

Glad to hear that 🙂

[Author]

Posts