All latest themes offered by Weebly are responsive and you do not need a separate mobile editor for them. It is super easy to customize the header and sections of page with these themes. However, Weebly also offers more than 100 non-responsive templates with fixed background image. If you are still using one of the old non-responsive themes, then here is how to set different background images for your pages.
Background Image for Non-Responsive Themes
In this article, we explain the following two possibilities of changing the background image in a Weebly non-responsive theme.
- Change the background image for all the pages.
- Set different background images for different pages.
In both the cases you need to prepare your own background images which suits your site’s template. You also have an option to use Weebly background image editor.
Changing the Background Image of Your Site
- Prepare an image which suits your template design and navigation.
- Login to your Weebly account and edit the site which you want to change the background image.
- In Weebly editor, go to “Theme” tab and click on “Edit HTML/CSS” button.
- Click on the “Add new file(s)” under “Files” section and upload your background image.
- Go to “main-style.css” available under “CSS” section (some themes may have main.less file).
- Locate the body of the CSS and replace the last line in the body section. Generally it will be something like below:
background: url(main-bg.jpg) repeat;- Replace the line with below code:
background: url (Your-Background-Image-Name.jpg) repeat;- If you named your uploaded background image as image1.jpg then the code will be looking like below:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color:#5a5a5a;
background: url(image1.jpg) repeat;
}- Save your theme and publish the website. Open the site in browser to check the background image is changed to the new image as you uploaded.
Setting Different Background Images for Different Pages of Your Site
- Follow the same steps in the above method to upload the images files, here you need to upload number of images required for showing in different pages of your site.
- Name the images as image1.jpg, image2.jpg and so on.
- Go to “Pages tab and choose the page you want to change the background image.
- Click on the “Advanced Settings” option and paste the below code in the “Header Code” section as shown in the below picture.
- Here “image1.jpg” is the name of the background image you uploaded.
- Paste the same code in the header code section of different pages by changing the image name as “image2.jpg”, “image3.jpg”, etc.
- Publish your site and different pages will show different background images when the site is loaded in the browser.
This worked great… except my picture began to repeat about one inch too early toward the bottom of the page… is there a way to fit the image to the page… Or make an image that stays still as you scroll through the page?
You can’t upload images in a Word document directly on your Weebly site. Save the image as a separate image file with extensions like .jpg or .png and then upload on your site.
I am with Weebly and if I wanted to use a picture of a rainbow as a background for one page how would I do it? I did one in Word as a template so how would I upload it to use on one page for Weebly?