Resolving banner image problems: tiling, repeating, not fitting

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.

User-added image

To edit the size of your banner, you can either:

  1. Use the Style Designer.
  2. Use Banner Editor.
  3. Use the Aviary feature (Aviary is a web-based image manipulation tool that has an option for you to resize your image).

Style Designer

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 templates.

1. Go to Style > Designer.
2. Under the "Colors" section, click Banner Image.
3. Click Size. You have the following options:
  • Auto (keeps the original image size, no matter what the banner size is)
  • Cover (stretches your image to cover the entire banner area)
  • Contain (stretches or shrinks your image proportionally to fit in the banner area)
4. Click Repeat and you can choose one of the following:
  • No-repeat
  • Repeat (repeats horizontally and vertically)
  • Repeat-x (repeats horizontally)
  • Repeat-y (repeats vertically)
5. Under  the "Layout" section, click Banner Width.  You can select:
  • Outside Width
  • Inside Width.

Banner Editor

  1. Click on the banner area.
  2. 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.
  3. Make the changes and click Save.
  4. 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 templates will have access to the Banner Editor. If you find the template 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.


  1. Click Files.
  2. 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.
  3. Once Aviary opens, click 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.
  4. Click Apply.
  5. Click Save.

It's easy to take your business online with Yola.