This tutorial will show you how to make a rotating background for your Weebly site. In order to achieve this effect, we'll be using the Weebly "Slideshow" element we all know and love, as well as a little code editing. And since we're using the "Slideshow" element to create the rotating background effect, you can even link each individual image in the rotating background to another page.
Step 1. Open the html/css editor
Click on "Design" at the top, then click on "Edit HTML/CSS" on the left.
Step 2. add html code
Select the page layout your site uses on the left. Add the following code just below the beginning of the "<body>" div.
Note: If your Weebly sites uses more than one type of page layout, you'll need to perform this step for each page layout your site uses.
Step 3. Add css coding
Select "main-style.css" on the left and add the code below just after the general styling in the css file.
While still in "main-style.css", you need to find your website's content's css coding. For this specific theme, we're looking for "#main". But because we are using the rotating background on one page layout [this tutorial uses ".landing.html"] , we want this code just to affect this page layout.
Copy the "#main" or "#main-content .container" code, paste it right below the code you copied it from, and apply the orange code as shown below.
Note: Some Weebly themes uses "#main", while others may be using "#main-content .container". If you're not sure the content area div tag your site's theme is using, just simply right click on your site's content area in a new window, and "inspect the element".
If you still need help, leave a comment below!
Step 5. Use the "slideshow" element
Grab the "Slideshow" element from the left, and drag and drop it into the northern most part of your Weebly editor.
Select "Simple Slideshow" and then click "Continue". If the slideshow box freezes after clicking "Continue", simply "X" out the window and begin uploading your pictures.
Step 6. Add images
Click the top part of the Weebly editor (the area where you dropped the "Slideshow" element), and begin uploading your photo. This is where you may choose to hyperlink each photo to another page.
Recommended image sizes are 1500x900.
Step 7. Change the "slideshow" elements' settings
You want the background of your website to look more like an autonomous, rotating display of images rather than a slideshow. Plus, we also need to finalize the dimensions of the rotating background so it fits perfectly in your website.
Click once more on the top part where you added the slideshow element.
Weebly Tricks is a third-party Weebly 'after market' site providing tutorials, apps, and widgets for Weebly sites. Weebly Tricks is not affiliated with Weebly, Inc in any manner. Not all tutorials work for every site and may require additional customizing. Always save your files before editing.