Hi

Thanks for contacting us and sorry for your issue. Could you please give me your site URL? So that I can check.

-Regards.

yes I have but inserting same image in each section and page is very slow!! I want one image for all page and not for each section

Try this CSS in your custom.css file

section#sp-main-body{
  background: url("sppagebuilder.com/addons/carousel/carousel-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

Hello, your css code not work. I try with this css into my page css section:

section#sp-main-body{
  background-image: url('/images/my_image.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

but not working

Can you help me?

Ciao.

Shared above CSS looks OK.

1. I suggest to add full domain name before /images/ with https
2. Remember that image used on the background should be bigger than 1024px of width (!)
3. And path and file name must exist.

Browser is not so smart, if you make even basic mistake bg image will not be displayed.

Mentioned CSS style can be used for #sp-component or #sp-main-body

In first your post you made a mistake

.com-sppagebuilder. #sp-main-body { background:.....

extra "." after "....builder" yes, it can stop CSS style (!)

It must be

.com-sppagebuilder #sp-main-body {...}

Hi Aldus,

Is this solved now? And thanks Paul for helping him.

Hi, I didn't solve anything. Your CSS doesn't work. I need to insert the CSS in the CSS section of the affected page so that it has the same background image for the whole page. The background image is inside the images folder. I can't accept to insert the background image in every single section, because when it loads the page it loads it in pieces and it looks bad, especially on mobile devices. Thanks

I need an answer and assistance to my request. Is it possible? I pay a service to have support! Thank you

Share access to back-end otherwise we cannot check where is a mistake.

and tell me which image should be used.

Please see informations below. Please answer very quick because is urgent.

Regards

Look down, I cannot see admin login screen

Please try now.

The background image must work also for mobile and tablet devices.

Please help me because are 3 days without any solution!! Thank you

Please help me because are 3 days without any solution!!

Sorry, but it's NO TRUE. We gave you CSS solution that works in most cases.

2nd. I waited 24h for access to admin area !

Checking... thx for access.

OK, done.

The problem was not with CSS, but with the image. (and yes, I told you about that 2 days ago)

If you used small image (310x163px) that was mechanically resized by the browser - you didn't see any details, only solid blurred dark blue (high-school physics classes).

I used much bigger image (and similar design): /images/image_interested.webp

and now that background is visible on ALL pages where you have SPPB.

All my CSS is here: templates/investa/css/custom.css file

I found orginal image that you used (with watermark) and uploaded it here: /images/image-interested.webp

So if you don't believe me (you've right), you can always change to that image and compare view.

In summary:

• For the desktop/laptop background, you should use an image that is big enough.
• We all make "stupid" mistakes from time to time ;]
• For small Mobile screen I would use solid color, not image that people even will not see, or use different image, vertical shape, for example, 680 x 2800px.

Hi, please tell me in whichpage section i should insert the big background image

Thank you

In that one which you really need, I don't know that.

I think you should write more details, otherwise it's hard to guess how we can help you.

Maybe using one common image for all pages is not ideal solution, and you should consider other method. For example custom class name that will add bg image there.

Referring to the movie John Wick, everything has its consequences, every choice that you made.

Hi Paul, I just want to have a different background image for each single page and underand the section to insert itIf I have a page with 3 sections, I would like to avoid inserting the image in each section. Thanks for the help

As I thought, but you made confusion with first post, oh !!!

Anyway, you have to create, for example, few styles that each of them will use different class name and different image. Then just in Section Class name you will put name of that class name. Typical CSS task.

I made you example (with "space" class name), now you turn, becuase we cannot teach CSS here.

Where to use it

Your custom.css file

Final effect

Now looking at my example, you should be able to make similar premade styles etc. As you see it's very basic CSS code.

Hi Paul, thanks for your clarifications and instructions. I am very grateful for what you are doing for me. I just want to ask you one last thing: I would like these css lines to be only for a specific page and NOT as Desktop & General view for all pages. That I would have solved my problem. What should I do? Where should I write the name of the page?

/* Desktop & General view */
.com-sppagebuilder #sp-main-body   { 
  background-color: #092C50;
  background-image: url('www.xxxxxxxxxx.it/images/image_interested.webp');
  background-repeat: repeat-y;
  background-size: cover;
  background-attachment: fixed;
  background-position: top right;
  }

Thank you so much

Hi, I inserted the code in the page settings of the single page and it works perfectly. Unfortunately it does not work in the pages that are part of the sp simple portfolio. Where do I insert the css code for the sp simple portfolio pages?

Thank you very much

Just from my Custom CSS line 18 remove this word ".sp-pagebuilder" then it will be fully universal code.

I added that becuase since beginning you asked about SPPB pages.