Background images in multiples rows starts to disappear

I have a page with multiple rows to showcase my rooms to rent out in my hotel. I have put all 6 rooms on individual rows using the siteorigin text widget. Plus I have 1 blank white row in between as a “buffer” as I don’t know how else to separate them visually. So I have many 11 rows. On each room row I have a different background image to denote the different names of the rooms (name after animals). The images work fine on the first 2 room rows but then after that the images gradually start being misaligned and you start to see less and less of each image in each row. They are all separately loaded but it is as if they are sitting altogether behind the rows on a page somewhere. I start to get a blank bit at the top and then you star to see the top of the image. As you go to the next set of rooms you get more blank background until the last, you can see no image at all.

I can only think I need to create two room pages and just be content to lose a bit off the third image in the 3rd room row. But customers may not look at both pages.
Maybe there is too much on one page so I have no choice??? Please advise regarding why the images are doing this. Is it because there is too much on one page? Can I create the thick white border at the bottom within the room row so it will lessen the amount of rows on the page?
Please help, thank you

Hi there,

Have you try to use service widget? you can set your rooms as a service items, add the description, add a category and upload a featured image. Go to your dashboard > service > add new service

Then to displaying it, go to your page > add “Services Type A” widget > set the number of service items and category slug.

Hope it helps :slight_smile:


Thanks for message. I have a couple of rows using Service A widget. One is for the types of rooms which then link to my room pages with lots of photos and info. So I know about services. I cant see how that helps with my background image moving down out of sight. Sorry.

I have to have a page full of photos as it is a hotel trying to rent rooms. So that will link to my homepage and the service row. ie en suite rooms, bandas, camping. It is the banda page that is the problem as I have 6 rooms and each will have about 5 photos. So I am currently making 6 of these room rows. And so for ever reason, each background image gets cut off as you scroll down the page and down the rooms. Perhaps the image was not intended for this sort of use. But if I am loading a new image to each row, why should there be a problem as they should be individual settings.
Any more help would be appreciated

I see… to fix the background image issue, please install and activate Custom CSS plugin then go to appearance > custom CSS > then add these CSS code:

.panel-row-style {
    background-position: top center !important;

Then to reduce the blank row which you used as a “buffer” row, please go to: Edit page > Edit row > attribute > add these CSS rules to the CSS styles field: height: 3px; see this screenshot

Thank you so much for the row image. Work a treat and looks brilliant…well I think anyway :).

I am having trouble with the “buffer” bit. Shall I open another query? I don’t know how to show/link a screen print. I have seen yours and downloaded lightshot but not sure how to use it etc etc. Not sure if I done it right but this is the link it gave me. if not then i a copy and paste below.
I have a ‘CCS styles’ in my widget but not when editing the row itself. And so is not like your screen print. When editing the row, I have Row styles at the top, then Themes. Thats it. No attributes as in the widget.
I show you here using copy and paste what I have showing -

In themes I have

Bottom Border Colour
Top/bottom padding

Top and bottom padding for this row [default: 100px]
Centre align the content?

This may or may not work. It depends on the widget styles.
Background Colour

Background colour of the row.

Colour of the row.
Background Image
Select Image

Background image of the row.
Row Layout
Mobile padding

Here you can select a top/bottom row padding for screen sizes < 1024px
Row Class

Add your own class for this row
Columns padding

Remove padding between columns for this row?

Thanks for you help


I am not sure why the Row’s configurations is different.
Back to the “buffer” issue, maybe you can add the code in above to this field “Add your own class for this row”

Thanks for your help.