Why is my header image not fitting the header area?

When you upload and image in Weebly, the image perfect editor automatically crops your image according to the size of your browser. Since the responsive header is not activated until the site is published, the header image height is fixed in editing mode. Due to these reason, even the suggested image size may not be a perfect fit. This post show you a work around Weebly’s image editor limitation and show you how to adjust the browser to fit your image size:

1) Create your images

Create your images according to the recommendation in our post: How to create responsive header images

2) Weebly Image Editor

Once you have your images, you can upload them in your site. Here is how the image will look when you first upload in the header area:


From the image above you can see gaps even when the image size was created exactly as recommended. Instead of making the image fit the header area which will distrot the image, we will resize the BROWSER to fit to the image size.

  1. MOVE the image to align with the LEFT size of the window.
  2. Now RESIZE your browser so there are NO MORE Gaps


  3. Once complete, save your image & exit the editor

You will see the image get cropped when you are in editing mode. This is NORMAL. Once the site is published, the responsive header will then be activated and the header image will display properly.