- This topic has 5 replies, 2 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
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::beforeNo success either.
Honestly, I am a bit disappointed by generateblocks as well as generatepress.
Do you have a solution?Customer Support
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,
PhilippeIt 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/#deviceOr 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!
- You must be logged in to reply to this topic.
