[Resolved] Different Background Images for Different Devices

[Angus]

Hi I’m trying to have a different background image for mobile, tablet and desktop, as the bg image is way off centre on mobile. I’m aware background images aren’t responsive so I’ve tried using css found on this support forum but I’m not having much luck.

I’ve tried among others..

@media (max-width: 768px) {
    .mobile-hero-image {
        background-image: url('url to mobile image') !important;
    }
}

Any ideas?

[David]

Hi there,

are you trying to change the background of a Header Element or a GenerateBlocks Container ?

[Angus]

A GB container

[David]

Did you add mobile-hero-image to Additional CSS Class field in the Container Blocks advanced settings ?

[Angus]

Duh! No I didn’t, but I have now, and it’s working! Thankyou! Can I add more than one CSS Class to Class field?

[David]

You can add multiple classes – just separate them with a space.

We’re looking at responsive background image options such as this in GenerateBlocks Pro

[Angus]

Brilliant! Can we pre-order? lol

Thanks again for your help David

[David]

You’re welcome

[Sarah]

We’re looking at responsive background image options such as this in GenerateBlocks Pro

Any news/updates on this?

[David]

Aiming for next week for a GB Pro release. And it will provide responsive backgrounds

[Isabel]

Hi! where can I find the responsive background option? My background looks great on computers but it looks terrible on mobile.

[Ying]

Hi Isabel,

The responsive background option is from Generateblocks Pro.
It’s not a GP feature Unfortuanly.

You could try some CSS solution for backgrounds on mobile.

[Author]

Posts