How To Make Custom Background Images & Tiles

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 the site, and preset designs.

If you are going the DYI route, make sure to read all the way to the bottom to get the right image sizes in 'Proportions for background images'.

How to open the customizer


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 log in to your site.



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.



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.



To upload a new image select > Upload Files



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 ratios 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.

Seamless Background Tools:

These are tools provided by other companies that you might find helpful in making your own seamless background. While we can't offer support for these tools, most are for only making seamless backgrounds. ( free for 14 days, up to 50 backgrounds. nice design) (free, works well for making a pattern out of an icon or graphic)

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