[Resolved] A very simple question, I would like a container to fill the background differen

[Hernan]

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 !

[Hernan]

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

[David]

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.

[Hernan]

Thank you very much for the tip ! I really liked it, that way I have more control in the same editor

Thank you !

[David]

You’re welcome

[Author]

Posts