The reason that your banner image is repeating itself is because it might not be the recommended size. To find the banner dimensions, hover over the banner area. A dialog box will open and you will see the Banner Size dimensions at the top of the dialog box.
To edit the size of your banner, you can either:
- Use the Style Designer option below.
- Use Banner Editor option below.
- Use the Aviary feature option below (Aviary is a web-based image manipulation tool that has an option for you to resize your image).
The Style Designer has a number of ways for you to alter the banner size area. Please note: These options may not be available on all styles.
1. Go to Style > Style Settings > Style Designer.
2. Under "Colors", click on "Banner Image".
3. Click on "Size". You have the following options:
- Auto (retains the original image size)
- Cover (stretches your image to cover the entire banner area)
- Contain (stretches your image to proportionally to fit in banner area)
4. Click on "Repeat" and you can choose one of the following:
- Repeat (repeats horizontally and vertically)
- Repeat-x (repeats horizontall)
- Repeat-y (repeats vertically)
5. Click on "Position" and you can choose the position of the banner.
6. Under "Layout", click on "Banner Width". You can select:
- Outside Width
- Inside Width.
Normally for the banner to be shown based on the image size, you will want to have Position set to Top Center, Size set to Auto, and Repeat set to No-Repeat
- Click on the banner area.
- The Banner Editor will open where you can scale your image to fit into the banner area perfectly by dragging on the white squares or slider bar.
- Make the changes and click on the "Save" button.
- The banner image will load on the page in the Sitebuilder and a new version of the file will be saved in your File Manager.
Please note: Not all styles will have access to the Banner Editor. If you find the style you are using doesn't open up the Banner Editor, your changes can be made through the Style Designer. Please refer to the steps above.
- Click on Site > > Content > File Manager.
- Hover over banner picture you would like to edit and click on the "pencil" icon at the bottom left corner of your image. Alternatively, you can right-click on the picture and select "Edit with Aviary". Both options will take you through to the photo editing dialog box.
- Once Aviary opens, click on "Resize" to adjust the image to your liking. Enter your new dimensions. If you wish to retain the proportions, the lock icon needs to be blue. If you wish to enter your own custom dimensions, click on the lock icon to unlock this and it turns gray. Then enter your desired dimensions.
- Click on "Apply".
- Click on the "Save" button.