Archived topic
A very simple question, I would like a container to fill the background differen
4 replies · Started by Hernan on January 25, 2023
Hi, in GeneratePress it is easy to change the background type. In this banner I have the background image in "cover" format
On desktop and tablet it looks good. But it doesn't work well on mobile, everything becomes too square. I would like that in mobile it was another type of padding, maybe "fill"
I tried the following but it doesn't work, I've tried several ways but I can't:
.gb-container-b334a3b7::before{
background-size: fill !important;
}I've also tried creating a class for the container and targeting the ::before of that class but it doesn't work either.
How could I correct it? It would be great if in the future GeneratePress/GenerateBlocks could set different types of background-size responsively in the design menu
Thanks !
I was able to come up with the solution I feel a little embarrassed. Turns out I was actually doing it right but the property chosen was wrong (barely noticeable difference, fill and cover look bad on mobile)
In mobile I decided something a bit strange:
.container-responsive::before{
background-size: 170% !important;
}It's not very elegant, I'm trying to center everything manually, but it's an option
Glad to hear you found a solution.
Just a side note: The GenerateBlocks Pro has plugin has an Advanced Background feature that allows you to set different images and image settings for different devices.
Thank you very much for the tip ! I really liked it, that way I have more control in the same editor
Thank you !
You're welcome