How to add Overlay Color on Page Background in Wix

In Wix, We have option How to add Overlay Color on Page Background in Wix.

Let’s Discuss in Step by Step.

Table of Contents

Step 1: First Login into the Wix Dashboard

Step 2: After login , Select the Website and Open the Editor

Step 3: After Open the Editor, You can see the White Background of the Page.

Here you can see how to change the White Background of the Page.

Step 4: Move the Cursor to left side of the Wix Elements and click on the ” Site Design “.

Now click on the ” Site Design ” Tab and choose the ” Page Background “.

Step 5: After Clicking on the Site Design and Choose the ” Page Background “, You can see 3 Options in Wix Editor

After Clicking on the Page background you can see the 3 options.

• Add Color
• Add an Image
• Add Video

Step 6: Let’s choose the 1st Option: Add Color and have no option for Overlay on the Color Setting.

Let me click on the “ Color ” and Choose the Color like ” Light Orange “.

Here you can see after selecting the ” Light Orange ” color. My Page Background color is changed from ” White ” into ” Light Orange Color “.

Step 6: Let’s choose the 2nd Option: Add an Image and set Overlay.

Let me click on the “ Image ” and it opens a new popup Window to select an image to upload from your computer / laptop, if you have uploaded an image into the ” Site Files ” then you can select it from here.

Note: All the files like Image, Video, PDF, etc… which you upload, you can have access on ” Site Files “.

But Now I can select an image ” Media From Wix ” and let me search by typing like Dentist.

And Here you can see the options of all the images related to the “Dentist“.

Let me select this one image, it looks good for me and click on the right bottom button ” Change Background “.

Now here you can see the Page Background is changed into an image.

Now you need to click on the Settings and see all options like: “ Image Opacity “, ” Color Behing Image “, ” Scrolling Effects “, ” Scalling and Positioning “, ” Where’s the Image Postioning“.

Let me guide you about the ” Image Opacity “, ” Color Behing Image “.

You need to click on the setting and reduce the ” Image Opacity ” to 50 and select the ” Color Behind Image ” is “Black“.

And Remain all the settings options remains the same and I will explain in detail on this Video ” Learn With Areeb “.

You will get confused why image is too big, becuase we are seeing 50% image of the window.

Let me show you how to make it 100%. You need to click on the Top Right Corner and Click on the icon ” + 50% ” and then it shows full 100% Window and now you can see the full image as well.

Step 7: Let’s choose the 3rd Option: Add Video and add an overlay color

Let me help you how to add video on Page Background in Wix Editor

You need to repeat the above steps how to upload an image or video.

You need to click on the Video and upload a video from your computer, but I will upload from ” Media from Wix“. Let me type ” office ” on Search bar & choose a video of “Office“.

Let me choose the 3rd Video and click on the bottom right button ” Change Background “.

Here you can see Page Background Video is Set.

Here you need to click on the Settings to see the more options ” Overlay Pattern “, ” Overlay Color “, ” Play Speed ” , ” Play in a Loop “.

Now Let me choose the Overlay Pattern #4 from first line. And Set an Opacity & Color to 50% and remains the Play speed andPplay in a loop as it is.

Here you can see the Video Background Opacity is 50%.

Note: You will not see the video running in the Wix Editor Mode, You need to see the video after Publish the website or in Preview Mode.

Now I have published the website and after publish I click on the ” View Site “.

Now here you can see on the New Tab Window, Video Page Background with black Opacity is running.

Please read the whole article carefully. I have explained in detail.