Upload Background Image – Multi-background

This theme allow you to have a different background image on different page. When the site is published, the background will be responsive. So the image will stretch max height OR max width to cover entire screen.

When you are in editing mode, you will see the background stops at the bottom of the image and a white background will show. The responsive background is turned OFF when you are in editing mode. Once you publish your website, you will not see that gap.

 

Background image editing gap

 

Edit Background Image

Hover your cursor near the top of the page and an orange edit button will appear. Click to start uploading your background image

Edit Button

Upload Background Image

Weebly’s image perfect editor crops the image base on your screen size, so you might not have a lot of control over how tall you want the image to be. Here is a method to upload your image to allow you to insert a tall header image. When the site is published, you will be able to see a larger image when you are viewing the site in smaller devices.

 

 

1) Resize Browser

If you have a widescreen monitor you will be more prone to Weebly image perfect editor cropping your background image. Before uploading any background image, re-size your browser window to a square shape like the screenshot on the right.

 

2) Upload Your Image

Keep the browser window in a square shape and upload your header image. The part of the image that land with in the non shaded area will appear in the header.

Please note depending on the screen monitor, the bottom part of the image may be shown in full. This is because the full screen header will re-size according to the monitor size. The width will re-size accord to the width of the monitor while the height of the image will re-size proportionately to the width. This will prevent the image from distorting. As such, depending on the size of the viewing monitor, the full height of the image may not be shown.

The theme will automatically stretch the background to the screen size, so you can place any background image size you like. For optimal result, we recommend to use image between 1200px – 1400px in width and 800px – 1000px in height. Please note depending the shape you re-size your browser to be in step 1, the image size will change.

ALWAYS COMPRESS YOUR IMAGE before uploading your background image in Weebly. This will help you site to load faster. Use Yahoo Smush it to compress your image in to manageable size

Edit Button

Saving Background Image

Weebly allows you to several save options

  • Save to all pages
  • Save to this page only
  • Save to selected pages

Here select the save option you want

Save options