[Resolved] Set Background of a Section To Repeat

[Frank]

I was trying to set the background image of a section to repeat, but could not figure out how – using this code:

.bg-blue-pattern {
  background-image: url("http://emory.fxhosts.com/wp-content/uploads/2019/05/emory-bg-pattern-blue-mini.png");
  background-repeat: repeat !important;
}

and setting bg-blue-pattern as the CSS Class of the section only results in the background image being stretched to fit the container.

Same result if I set it to a div or span class or ID.

[David]

Hi there,

you need to set the background size as well for the repeat to work eg. add this property:

background-size: 100px;

Change the 100px to suit the original image size.

You could just add the background image to the GP Section in the Settings tab, give it a CSS class of say bg-repeat then your CSS would look like this:

.bg-repeat {
  background-size: 100px;
  background-repeat: repeat !important;
}

Then you can apply that class to any Section you want the repeat on.

[Frank]

This worked like a charm! Can’t believe I missed something so simple (although, isn’t that always the case).

[David]

It certainly is! Glad to be of help

[Author]

Posts