Great ActionBar Background Images

Creating a great background image for your ActionBar will help it stand out while still complementing your website design. But there are a few principles to consider when creating your own background image.

Height and Width
The ActionBar stretches across 100% of the width of the browser window, so it doesn’t have a fixed width. But it does have a fixed height of 60 pixels. Background images are positioned in the center and bottom of the ActionBar area, and repeated horizontally along the x-axis.

Recommendation: Make your image template 60 pixels high and 20 pixels wide

Transparency
You can add a cool bottom border to your ActionBar by making part of the bottom background transparent (so your webpage design shows through).  Be careful with PNG semi-transparent images, as they aren’t always displayed properly some some older Web browsers.

Recommendation: Use only fully transparent areas in your background image.

Image file format
Any web-friendly file format will work, but PNG and GIF work better than others. Some formats, like JPEG can result in fuzzy, less appealing images.

Recommendation: Use the PNG or GIF format whenever possible.

Sample ActionBar Template Diagram

Click to view the ActionBar Template Diagram

Some Tips and Ideas for Great Background Images

Example image with a geometric bottom edge

As mentioned above, adding a geometric element as the bottom edge of your image (with a transparent background), can make a compelling statement while blending in with your website design. It’s important to make sure that when the image is repeated, the left side of the next image aligns with the right side of the previous. A quick check and maybe some tweaking to the image in your editing tool is usually all it takes.

If you’re interested in adding a special graphic to the left of the ActionBar content, you can create an image 1600 pixels wide (so your graphic won’t show in really wide browsers), for example, and leave the center 800 pixels empty to leave room for message content, placing your special graphic just outside this 800 pixel zone.

We don’t recommend putting logos in your background image, since your webpage already has one. But graphics that enhance your messages are fine. Examples include: little snowmen or other holiday-themed graphics, or a “sale” tag if you offer lots of coupon codes. Even a subtle abstract graphic, well-placed, can draw attention to your messages.

We’ll be adding more ideas for background images in the future, but this should help get you started.