Plugin Support
David
(@diggeddy)
Hi there,
GenerateBlocks Pro has Advanced Backgrounds which have full responsive controls, including different images for different devices.
In the free version you would need to add some CSS. Begin by selecting the Container Block you want to change the image for. In its Settings > Advanced > Additional CSS Class(es) add a custom class eg. no-mobile-background
Then add this CSS to remove the image, and swap the background color if required:
@media(max-width: 768px) {
.gb-container.no-mobile-background,
.gb-container.no-mobile-background:before {
background-image: none;
background-color: #000; /* Optional background color */
}
}
If you want a different image, then you would need to give the block a CSS class for adding a specific image eg. mobile-hero-image
@media(max-width: 768px) {
.gb-container.mobile-hero-image,
.gb-container.mobile-hero-image:before {
background-image: url('the_full_url_for_your_mobile_image');
background-size: cover; /* set background sizing */
background-attachment: initial; /* Remove fixed background if present */
}
}
Thread Starter
evabo
(@evabo)
Hey David,
Thank you so much for your help! I used the first option for the smaller blocks and it works like a charm.
For the full background image I used the second option with a smaller version of the full picture, but it still looks weird. I tried switching the size from cover to contain, but then it only looks good on the first block. Are there any other options here?
Thank you!
Plugin Author
Tom
(@edge22)
Hi there,
You may need to play with different “size” options to find the right one. You can find them here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
The result will largely depend on the aspect ratio of the image.
Thread Starter
evabo
(@evabo)
Hi Tom,
Thank you! I changed the background from the block to the body, and now it works! Just one more question, is there a way to use a semi-transparent color for the Optional background color (@media(max-width: 768px) {
.gb-container.no-mobile-background,
.gb-container.no-mobile-background:before {
background-image: none;
background-color: #000; /* Optional background color */
}
}
Thank you!
Plugin Support
David
(@diggeddy)
You can use a RGBA value for your background eg.
background-color: rgba(0,0,0,0.5);
That example is a black background set to 50% (0.5)
opacity.
You can use any RGB color value you like for the first 3 units, followed by the alpha ( opacity ) value.
Thread Starter
evabo
(@evabo)
Thank you so much, David. That works really well!
All problems solved π
Thread Starter
evabo
(@evabo)
Hi, this is Eva again. I successfully used the given options to change backgrounds. Now I am trying this for another web site, but I can’t get it working. Would it be possible for you to take a look? I only want to change the background of the last block for mobile…
How can I send you the link?
Thank you!
Eva
Hi Eva,
You can send the details here – https://generateblocks.com/support/
While waiting:
If your site is using a caching plugin, can you try purging/clearing plugin’s cache and the browser’s cache and check again to see if it finally applies?
Thread Starter
evabo
(@evabo)
Thank you! I cleared the browser’s cache on my cell phone and tried it, no luck… Now I am waiting for my account at gererateblocks.com/support to be approved π
Thank you so far!
You can use the form on the link provided (pre-sale tab) – https://share.getcloudapp.com/7Kuo0NGl – so you won’t need to register. π
Thread Starter
evabo
(@evabo)
Hey!
I already registered ans posted my question again π
Thanks!
Thread Starter
evabo
(@evabo)
Hi!
I manages to solve my problem! Like this:
`@media(max-width: 768px) {
.gb-container.mobile-hero-image,
.gb-container.mobile-hero-image:before {
background-image: url(‘the_full_url_for_your_mobile_image’);
background-size: contain;
background-repeat: no-repeat;/* set background sizing */
/* Remove fixed background if present */
background-color: #829D93;
}
}
And now it looks exactly like I wanted π
Best!
Eva
Plugin Author
Tom
(@edge22)
Awesome, thanks for letting us know! π