Basic help... how to change the page background to an image in Wix Studio?

Ask the community
1

I am really enjoying the Wix Studio Editor so far!

I cannot figure out how to change the page background to an image. I’ve combed the Academy, Forum, and Discord.
Surely this has to be simple and I’m missing it.

Help?

2

Hi, Allison.

I have not found a way yet. I know on Editor X, you could access this via the inspector panel when on the page tab. However, you can change the page colour on Wix Studio, or add media to a section background.

2 Likes
3

In addition to what I previously said…it is possible to add a pattern overlay to a section, I don’t believe this was possible in Editor X.

1 Like
4

I am currently testing Wix Studio and I really like it and I would like to use Wix Studio for the new website and I also ran into the same problem.

**

Is there a simple solution to set a background image for the whole page?

**

I want to use a background image on the website.
The background image should also be behind the header and footer.

When I use a section with a background image it doesn’t work
because the header is above the section, same problem with footer.

I would be very happy about a quick response.

1 Like
5

no response after 6 days.

@noahlovell do you have any ideas?

6

Hey!

I don’t believe setting an image as the background is possible.

Be sure to submit it as a feature request - Product Roadmap

8

My work around for this… I had to make the whole page a single section to replicate having an image for the whole background. Using rows / cells for sections.

I use page background image a lot in old Wix (which I haven’t closed until Wix Studio can do all the things I could before).

Am also struggling to find code to change the background image at different times of the day… which I could do with code in old Wix.

9

Design / Page Background / Image / your image

10

Currently it is not possible to change the background of the page to an image. In order to get around this you can try 2 approaches:

  • Build the entire page under a single section (and then you can put a background image)
  • Create a sticky section that is behind all the components and it will accompany the scroll. In order for the section with the image not to be part of the page, set it to a size of 1 pixel. and the internal image on 100 vh
1 Like
11

Thanks @CMSblocks.com . I appreciate it. My first approach was, as you say, build the entire page in a single section. As the user went between pages there would be small inconsistencies but acceptable. I then found a way to use custom code to add the image as background to all pages… this brings a fully consistent experience across pages.

12

Thanks for the info! @elliot9791 would you be open to sharing the code you used to get around this?

13

Alternatively, @CMSblocks.com I haven’t been able to figure out how to create a header over top of a section (so the image is behind the header as well). Is there a way to do this?
Thanks to you both!

14

Sure. Code is below. I’m not a coder and had help to do this. Put your own image URL in from the image in your site files.

For clarity… add to globalCSS in your page code, not in the normal place for regular page code.

The global CSS applies a background image to the entire site with a parallax scrolling effect. On mobile devices, the background behaves normally for better performance and user experience.

I’ve also added globalCSS code for Lightboxes to have their own background image, with similar styling rules, and also adjust scrolling behavior on mobile.

/*this adds the background image to the whole site */

.page {
background-image: url(‘YOUR PAGE BACKGROUND IMAGE URL.jpg’);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed; /* Fixed background for desktop */
min-height: 100vh;
}

/* Adjustments for mobile devices /
@media (max-width: 768px) {
.page {
background-attachment: scroll; / Change to scroll for mobile, or use ‘local’ /
/ Other mobile-specific styles here */
}
}

/* Background image for lightboxes */
.lightbox-bg {
background-image: url(‘YOUR LIGHTBOX BACKGROUND IMAGE URL.jpg’);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

/* Adjustments for mobile devices specific to lightboxes /
@media (max-width: 768px) {
.lightbox-bg {
background-attachment: scroll; / Change to scroll for mobile, or use ‘local’ /
/ Other mobile-specific styles for lightboxes here */
}
}

1 Like
15

Amazing. Thank you so much!!