Set Different Background Image for Different Pages in Weebly
Customizing Weebly Background Image
Weebly offers more than 100 templates with fixed background image, in this article we explain the following two possibilities of changing the background image in a Weebly 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 “Design” tab and click on “Edit HTML/CSS” button.
- Click on the “Add new file(s)” under “Files” section and upload your background image.
Change Background Image of a Weebly Site
- Go to “main-style.css” available under “CSS” section.
- Locate the body of the CSS and replace the last line in the body section. Generally it will be something like below:
1 | background: url(main-bg.jpg) repeat; |
- Replace the line with below code:
1 | 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:
1 2 3 4 5 6 | 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.
1 |
Change Background Image of a Weebly Page
- 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.
3 Comments
Leave your reply.