Weebly HTML - Changing Your Weebly Template’s Background
Changing your Weebly template's background by playing around with the Weebly HTML is not as complicated as you would think.
Being able to change the default Weebly background to your own custom background will really transform your website to your own. It helps personalize it, just the way you like it to look!
The following HTML lesson is in written form. If you want tutorials that will show you step-by-step in friendly video format on how to customize your website background, just visit DivTag Template's Free Weebly HTML Tutorials.
DivTag Templates has a comprehensive video tutorial which will show you how to change Weebly's background. It's free so why not give it a shot?
Weebly HTML - Step 1
Go to the “design” page and select the Standard Weebly template you like. Click “Edit HTML/CSS” tab to open the template edit page. In the CSS tab, replace
background: #f7f7f7 url(bodybg.jpg) repeat-x;
with
background: #070f11 url(samplebg.jpg) repeat-x;
In our example, “samplebg.jpg” (part of the new code we just instructed you to insert) is the name of the new background design file in our example. If your background design file is named differently, use your file name inside the snippet of code instead.
background: #f7f7f7 url(bodybg.jpg) repeat-x;
with
background: #070f11 url(samplebg.jpg) repeat-x;
In our example, “samplebg.jpg” (part of the new code we just instructed you to insert) is the name of the new background design file in our example. If your background design file is named differently, use your file name inside the snippet of code instead.
Weebly HTML - Step 2
Upload the your background design file in the “File” tab. Again, in our example, we have used the image file of “samplebg.jpg”. This is just going to be your own background design file of your liking.
The background image size should be a maximum of 481px by 320px. A smaller image size would also work, but you will have to experiment with a few different image sizes to make sure they fit just perfectly on your layout. |
Weebly HTML - Step 3
Preview your Weebly website design. Click "Save & Exit", and "Publish" to publish your new background!
To watch a comprehensive video tutorial on how to adjust your Weebly background, just visit DivTag Template's Free Weebly HTML Tutorials.
See how to change Weebly HTML for custom logos and layout width