Repeat row image background

Hello Support Team,

I have a tiny image that when set to repeat it produces a plaid. I have set this image as the row background image of one of the rows on my home page. It fills the space by stretching. I have read many threads about row background images and this seams like the default behavior. There were various CSS options, but I didn’t know which to choose.

Scenarios, not sure which I will do yet:

  1. Change the setting overall… meaning for all rows of all pages (excluding headers).
  2. Change the setting per row per page.
  3. Can I set a default for all pages all rows and then specifically change the ones I want different?

Thank you,

Lilou

Hello Lilou,

Please provide a link to your website and specify what exactly you want to achieve.

Kind Regards, Roman.

Hello Roman,

My site is not public yet and is rather messy at the moment. I am learning WordPress as I go. I am not sure how to connect to the pages without going though the “Admin” login thing. I made some print screens. I hope they will come out at your end.

On the Home page, the row directly below the “Slider”, is the one I am referring to. In a row, I used the Services widget to get a title and the three text areas along with an action button.

SydneyPlaidBackground_01

The original background file looks like this:
Plaid_AllBlueBitBr_2

I wish for the background image de retain its original size and repeat. I can achieve this at the widget level with the “Background Image Display” set to “Tiled”. But without the dark overlay of the row… eeesh!
Background at Widget level

My preference would be to keep it at the row level, get the overlay and full width effect without a background on the widget.

I understand that there are many levels of CSS possible. Is this right hierarchy?

  • Custom CSS in the Appearance menu (covers everything)
  • Additional CSS in the Customize page (seems to cover pieces on the page)
  • CSS Styles in the “Edit Row”
  • CSS Styles in the “Edit Widget”

If I simplify my question, where would I put what code to make my background tiled or repeat?

  1. If I want to do this for only the row of one page.
  2. All rows with imaged background of all pages.

If my assumption is correct, I could set the background behaviour at a higher level then reset a specific one on a lower level.

I do not always express myself clearly. Hope this will be easier to understand than my first post.

Lilou

I don’t think the way I inserted the picture worked…

Attempt 2 on pics

First screen with stretch background:

Original background picture:

Using the Background Display option at widget level:

I have put them on Google Drive. This should work… its a simple link, not sure why it wont post!

First screen with stretch background:
First screen with stretch background

Original background picture:

Using the Background Display option at widget level:
Using the Background Display option at widget level

Hello Lilou,

Please try to use the following CSS code.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

#primary .panel-row-style[data-hasbg="hasbg"] {
    background-size: auto;
    background-repeat: repeat;
}

However, you’ll have to add row ID in order to target a specific row (the code above targets all rows).

Kind Regards, Roman.

Thank you Roman,

The code works perfectly. So far I do not need to target a specific row. If I should need to do so in the future, how do I do this?

Forgive my newbieness … is the #Primary what I replace with the row ID? If so where do I find this ID? Is it the Row ID field in the Row Style panel under the Edit function?

Lilou.

You are welcome Lilou,

You should use a row ID that you can find by inspecting the row with browser tools.

Kind Regards, Roman.