Archived topic
Different Background Images for Different Devices
11 replies · Started by Angus on June 3, 2020
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?
Hi there,
are you trying to change the background of a Header Element or a GenerateBlocks Container ?
A GB container
Did you add mobile-hero-image to Additional CSS Class field in the Container Blocks advanced settings ?
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?
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
Brilliant! Can we pre-order? lol
Thanks again for your help David
You're welcome
We’re looking at responsive background image options such as this in GenerateBlocks Pro
Any news/updates on this?
Aiming for next week for a GB Pro release. And it will provide responsive backgrounds
Hi! where can I find the responsive background option? My background looks great on computers but it looks terrible on mobile.
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.
