How to customize the website background by using design tools?

January 31, 2023 - Yasmina Souidi
46856 views

3 minutes

To customize the design of your website and give it a totally different look, there is nothing more effective than changing its background. The technical team of SiteW has developed new features for your website design. And what’s great about that, is that you will be able to enable all these new options, in just one click, only by checking a box.

SiteW offers you the possibility to add special effects to the background of your website: image, parallax images, video, texture, single color, gradient. You can add these options to the background page of your website if you want to use the same background for the whole website or you can choose a different background for each page or only some of them.

How to enable the customization features for the background of the page?

  • Go to the background page or to the page you want to modify
  • Click on the Design tab, then on the Page background button
  • Check the desired box
  • Modify the settings

Add a background image

After checking the Image box, choose an image from the file manager of SiteW. You can upload an image from your computer or find free stock photos on Flickr, OpenClipart or Picasa. For better results, remember to use high quality pictures (1000 to 2000px width).

Add a background texture

Check the Texture box and choose a small repeatable image in order to create a pattern.

Add a background single color

In order to get a uniform background, check the Color box, you can simply select your color by using the color picker. If you already know the precise color you want to use, you can also enter its html code.

Add a background gradient

Check the Gradient box and choose in the drop-down menu the gradient style you want: vertical, horizontal or radial.
You will be able to choose the colors of your gradient right below. Click on the colored squares to choose the colors (once again, you can select them by using the color picker).

You can add as many color squares you want simply by clicking on the gradient bar and thus create a multi-color gradient. You also have the possibility to define the proportion of each color of your gradient, simply by moving the color points you have created along the gradient bar.
The Slowly animated box will allow you to enable the animation and to give a nice and smooth motion to your gradient. This effect can be tested by Starter users on the website modification page but can be enabled only by Premium and Pro users.

Add one or several Parallax images

This option allows you to add one or several background images that scroll slower than your website content in order to create a stunning 3D effect. If you choose a single image, the latter will scroll very slowly while the page is being scrolled.
The parallax images can be tested by Starter users on the website modification page but can be enabled only by Premium and Pro users.

Add a video

Choose a video from Youtube or Dailymotion. You’d better select slow and abstract videos for your background, such as graphic animations, landscapes or fuzzy videos.
The background videos can be tested by Starter users on the website modification page but can be enabled only by Premium and Pro users.

You now have a whole bunch of tools to customize your website with unique and original effects. Go!

Yasmina Souidi
Content Manager Junior
My passion for the Web urged me to SEO and content creation. Curious and meticulous, I work as a Content Manager Junior at SiteW. 🌱

Last update: January 31, 2023