How to add a background image to my site?



Most of our themes include a setting to add a background image. If the image is smaller than the screen, the image will repeat like bathroom tiles.

How to check to see if your theme supports a background image

Not all themes supports a background image in the settings. To check if you theme does, go to Content > Website Theme Editor and click on the Edit Styles button. Then scroll down to the Global section and look for Body background Image. If you find it, you theme supports a background image.

Check for Body background Image

If you do not find the option, a background image can still be added to your site. However, this would require a design change to your theme. 

You can request this design change from our design team by visiting our Ask Us page and clicking on I need some design work done (website, eBay, newsletter template or system documents).

 

Uploading an image to your site

View ImageTo upload the background image, go to Content > Asset Manager (Images & Files) and click on Images on the left-hand side. Click on the Upload button and select an image. Then click on Upload Selected File.

It is recommend that you save image in JPG format. You can use graphics software to resize and convert the image. Set the image quality to around 50%. This will give you good image quality and also reduce the file size of the image.

Once the image is uploaded, right-click on the thumbnail and select View. When the window opens, copy the web address from the top of the window.

Copy web address

 

Adding the image to your theme

Then go to Content > Website Theme Editor and click on the Edit Styles button. Scroll down to Global section and next to Body background Image select URL and paste the web address and apply the changes.

 

Stretching the image to fill the screen

A change can be made to the theme design so that the image fills the entire screen. First make sure your image is at least 1,500 pixels wide. Otherwise the image will look blurry on large screens.

The follow code needs to be added to the style.css file in the theme:

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

If you have web design experience you can make the change yourself. Go to Content > Website Theme Files and select your theme, then select Assets/css/style.css. Add the CSS code to the bottom of the file and save.

You can request this design change from our design team by visiting our Ask Us page and clicking on I need some design work done (website, eBay, newsletter template or system documents).


  • Last Modified: 18/11/2016 Neto Version: 5.85