June 16, 2011

Best size for Custom Banner

The width of a custom banner image will depend on your design settings. If you are using the Mosaic Theme, the best fit banner width will be shown at Design > Banner.

If you've chosen to customize your design using the Theme Builder, you will see sections for the main content and left, right, or center columns under the General heading at Design > Theme Builder.

Note: This tip pertains to Plus, Unlimited, Premium, and Business Class plans.

Expand the column sections to view the width of each:

Add the widths of each column to determine the overall width of the blog's container. In the above example, the three columns total 900 pixels.

Your banner area is surrounded by 15 pixels of padding. When creating a banner image, it should be the total width of the blog less 30 pixels (15 pixels on either side).

For this example, the banner image you create should be 870 pixels wide.

The height of your banner image can vary based on your preference. However, we do not recommend banner images that are taller than 200 - 250 pixels.

With Custom CSS, you can remove the padding &/or center the banner. See the Banner Tips article for more information.

Fluid Widths

If you've set the Main Content Column for your blog to fluid pixels, the width of the center column will expand or contract based on the size of the reader's browser window. In this case, we recommend creating a a banner image that is under 800 pixels wide for maximum compatibility with different screen sizes. It usually works well to match the background of the image to the background of the banner area for a seamless effect.


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Discover Typepad Services