Making Room Outside the Box: Add Padding with Image Transparency

Have you ever worked on a custom banner for a WordPress blog, and no matter how you tweak the padding and margin settings in the stylesheet, it just won't position properly?  Or it positions properly in Internet Explorer, but not in Firefox, or vice-versa.

Here's helpful trick:  Add the padding with a transparent image.  And Better yet:  Just make that transparency part of the banner image.

Here's how, in Photoshop:

Open your original banner image.  To view the image size, click Image -> Image Size, and make note of the Width and Height Pixel Dimensions.  After you note the dimensions, click cancel.

s

Next, create a new, blank image with a transparent background:  File -> New   Making sure to check the selection box for Transparent.  Change the Width and Height dimensions to numbers slightly larger than those of your original banner image.

Click back in the original image, to make it the active window.  Click Select -> All

Click the Move Tool

Drag the original image into the new blank file.  Position it so the amount of padding you want shows around all the sides of the image.

Save for Web in .PNG format to preserve the transparency.  Upload to the blog.

Presto!  Instant padding!  Works in all browsers.  :-)