Archived topic
Change Container Background image size depending on device
5 replies · Started by Philippe on March 10, 2023
Hi there
The footer of my website should have a png as background. I want it to have a different size depending on the device.
Desktop: cover
Mobile: 150%
When I use the footer widget to add a container with the background image I cannot specify multiple sizes. (Using Generateblocks, but not pro)
Instead, I tried to use the premium generatepress background component. This is even worse. Here I can not specify 150% nor is it possible to have device specific backgrounds.
I am currently trying with a media query and this css class:
gb-container-8e08d4db::before
No success either.
Honestly, I am a bit disappointed by generateblocks as well as generatepress.
Do you have a solution?
Hi there,
Background images aren't responsive by nature (not a theme thing) and it can be a bit tricky to tweak for sure.
Have you considered creating a custom footer by creating a Block Element - Site Footer?
https://docs.generatepress.com/article/block-element-site-footer/
Then you can use GB to fully build out the layout and use the Container background image option:
https://docs.generateblocks.com/article/backgrounds-options-overview/
And tweak the responsive settings using the responsive controls:
https://docs.generateblocks.com/article/responsive-controls/
Hi Leo,
I don't see the advantage of a custom footer instead of the footer widget. In both cases I end up using GB containers' background image.
When I use the responsive ccontrol of the block, switch to mobile and set the background image size from cover to 150%, it also adjusts the size on desktop and vice versa. I really like those responsive controls but they do not seem to work properly for the background image. It would be perfect if only I could set two different background image sizes for desktop and mobile.
Do I need Generateblocks pro for this?
Best,
Philippe
It would be perfect if only I could set two different background image sizes for desktop and mobile.
Yes - the Advanced Backgrounds options in GB pro would be what you are looking for:
https://docs.generateblocks.com/article/advanced-backgrounds/
https://docs.generateblocks.com/article/advanced-backgrounds/#device
Or you can try this CSS:
@media (max-width: 768px) {
.gb-container-8e08d4db:before {
background-image: url(https://vivakirche-arth.ch/wp-content/uploads/2023/03/footer-raute.png);
}
}Learn how to add CSS: https://docs.generatepress.com/article/adding-css/
Thank you for your help!
This is what I did:
/*Footer Background mobile*/
@media (max-width: 768px) {
.gb-container-8e08d4db:before {
background-image: url(https://vivakirche-arth.ch/wp-content/uploads/2023/03/footer-raute.png);
background-size: 125%;
}
}
/*No copyright under footer*/
.copyright-bar {
display: none;
}Have a good week!
P.S.: It is very frustrating to have the responsive controls within GB, while they are not working because it is nor the pro version. There is no information (like a tooltip) that this option won't work in the non premium version. This left me thinking it must be a bug.
Glad to hear.
P.S.: It is very frustrating to have the responsive controls within GB, while they are not working because it is nor the pro version. There is no information (like a tooltip) that this option won’t work in the non premium version. This left me thinking it must be a bug.
Hmm I can see that for sure. I'll bring it up for internal discussions.
Thanks!
