Design Customizer: Background Images

How to add background images in the design customizer

If you would like to upload your own background images here are a few tips to keep in mind. This is only a guide for those wishing to create their own styles completely from scratch, this is not for everyone!  WebBabyShower provides a ready to use site, and preset designs (coming in April!).

How to open open the customizer

1.

Make sure you are logged into your site.

If you see the 'LOG OUT' button in the lower left hand corner of your site then you are logged in. 

If you see 'LOGIN' then you should click to login to your site.

2.

Go to the top brown menu bar and find in the drop down: WebBabyShower > Customize Design

You can also get to the Customize Design settings from the admin icon dashboard.

3.

Your Customizer will be visible as a panel of options on the left side as you view your site.

Add background images in the design customizer

Once inside the customizer go to Site Background

Customizer > Site Background

From the Site Background settings panel you can do the following:

A. Remove the site background

Click on > Reset Site Background

B. Select a provided background

Select Theme backgrounds > Select ( Dropdown List )

C. Upload your own background

Change Image > Select

Upload New Image

If you have decided to upload an image, when you click on > Change Image the media manager will appear.

Here you can select from an image you have already uploaded, an image we provide.

1.

To upload a new image select > Upload Files

2.

When you have uploaded your image, make sure to save that image and select it for use click on

> Choose Image

This will place the image on your site.

 

Proportions for background images  [ advanced ]

The header section background is very wide but not tall, images with the ratio's below will work best. Taller images will most likely be cut off, but you are free to experiment!

The page background image is designed to create a seamless tile. This means the image does not cover the whole page but rather repeats like a fabric pattern to visually create the look. So the page background images you upload will repeat horizontally and vertically.

Our designers use these dimensions when creating the Style Selections.

Header Image: 200 x 1300px

Background Image Tile: 700 x 350px

You will find the best results if your images have a similar ratio, if not the exact size. So a page background for instance is twice as wide as it is tall.

We've uploaded one of the Style Selections base images, a dark one,  so you can easily see these ratios.

This is a background tile. 700 x 350px

This is a header image, note it's left space in the middle for the title to overlay. 200 x 1300px