Customize Your Twitter Page Background (Tutorial) ©

With Twitter being the other standard in the social networking world, it’s an important touch-point for our customers and pet parents in general.  I’ve noticed more pet  industry pages going up in the past year, but it’s still new territory for most.

One of the first tasks involved in setting up a Twitter page is design.  Your logo must be uploaded and the color scheme should revolve around your company’s colors.  You can simply leave it at that, as Freshpet does.

To customize your Twitter color scheme we start in Settings, which is found in the drop down menu under your page name on the upper right:

>> Settings
>> Design
>> Change Design Colors
>> Click on the colored squares to change the designated color.  The site colors change for you to preview, but you must click ‘Save Changes’ to keep them.

We have a number of customization options open to us and none are overly difficult.  The reasons for customizing your background are the same as the reasons you customize your website.  You want to appear professional and of course, branding, branding, branding!  Another important reason is to identify it as your official page, as brand piracy and trashing can occur on social networks.

There are a few basic Twitter design facts that you should be aware of before you start designing your custom background:

  • Images must be smaller than 800k.
  • Images must be in .gif, .jpg or .png format.  With the range of resolutions used by visitors, the graphic must resize clearly.  This makes .jpg the best choice or for images of limited colors, .png.
  • The actual Twitter background width is 1040 pixels.
  • The amount of space on each side of the center panels will vary according to the visitor’s screen size/resolution.  All visitors, regardless of their monitor size, will see 41 pixels on each side of the center panels.
  • The left center panel is opaque and the right center panel is semi-opaque.

We have two basic methods of customizing our Twitter page background.  One involves using a background image and the other uses tiling.  Once again, we start in Settings:

>> Settings
>> Design
>> Change Background Image
>> Click ‘Browse’ to upload your background image.
>> To use tiling, check ‘Tile Background’.


Tiling takes your image and repeats it over the background.  It’s easy and it will look fine at all resolutions as long as the image is on the small side.  To make the background appear smooth (as opposed to seeing multiple squares) you must use seamless tiles.  These are designed to either blend one square into another, or they don’t go to the edge of the square so there are no noticeable edges when it is tiled.

You can simply tile a small version of your logo, like Blue Chip Feed, although I would coordinate the color scheme with it to bring it all together… dark blue overlay with yellow links, or yellow with blue links, would set it off nicely.

Large image tiling will appear differently on every screen resolution, as demonstrated on the British Horse Society Twitter page, so it is best avoided.  On my screen, the words ‘The British Horse Society’ are cut off on the right.

Tiles are easy to design for just about anyone who can play around with a photo editing program.  I did this simple dog food tile in 10 minutes and you’re free to use it if you wish.

I designed this embossed tile for the American Livebearer Association in less than five minutes.  You can see it in action on their Twitter page.

For generic background tiles, you can use background tile generators to produce impressive stripes, tartans, patterns or gradients:

Pattern Cooler
BG Patterns
Pixel Knete
Colour Lovers
Stripe Generator
Striped Backgrounds
Stripe Mania
Tartan Maker
Dynamic Drive Gradient Maker
Gradient Image Maker
CSS Gradient Background Maker

The choice of ready-to-use tile backgrounds is virtually unlimited.  Use your favorite engine to search for “Tile backgrounds” or “Seamless backgrounds”.

Image Backgrounds

Without tiling, your image will be aligned at the top left of the screen.

The first order of the day is to change the Twitter background color to match your image background color. If you don’t do this, even a large background may only cover part of the space at high resolutions, ‘wide’ screens, etc.  For example, Bark Radio  uses a full background image which probably looks just fine on their screen, but on my wide screen there’s a blue section to the far right.

For the same reason, you’ll want the right side of your background image to be a solid color for a seamless match to your Twitter background color.  Images can be blended into the solid color using various graphic design methods depending on which software you, or your designer, are using.

Background Image with Sidebar Customized

If you’re using an image with a sidebar of information, like Petfood Industry Magazine, make sure the information block isn’t so wide that it’s partially covered by the center section at lower resolutions/smaller screens.  To ensure full visibility on all standard screen sizes, you will have to design your sidebar no more than 41 pixels wide.  However, if you use characters in your sidebar, such as your website or Facebook link, it will be very tiny on higher resolutions.  With more than 70% of users viewing your Twitter page at a screen resolution of 1280×800 or higher, going a size up to 108 pixels in width will suit the majority of your followers.

At 108 pixels, our All Natural Pet Care  sidebar is too wide for the smallest standard resolution, 1024×768 (15″ screen).  We decided to sacrifice the less popular small screen and design for all the rest so it didn’t look way too small on the larger screens at higher resolutions.

In contrast, Feline’s Pride  is too wide even on my screen, which detracts from an otherwise attractive background.

One way to work with the narrow space is to flip your design 90 degrees counterclockwise and have your sidebar run up the left side, which is the route we took.  Standard advertising banners are 468×60 pixels, so you’re well within 108 pixels if you flip your favorite company banner.

Some companies simply use a large font to type their name vertically up the left side.  You can also use ‘dingbat’ fonts to embellish the sidebar with pet or nature silhouettes.  Using fonts makes it easy to incorporate your company colors into the design.  You’ll find plenty of sites like Font Freak if you search for ‘free fonts’

Here is an example of a ‘natural pet’ font/dingbat image that you are free to use.  The branch extends because it won’t matter if part of it is covered by the center panel, while the animals are kept against the left side.  The ‘dingbat’ fonts used for this design were Birds of a Feather, Cats vs Dogs, Fantas Animals, and Plants.  To coordinate your design colors, use these hex codes or slightly lighter or darker versions:  D29944, B28239 and 8D672C

If you’re unsure of how your new design will look at different resolutions, there’s an online tool for that too – Twitter Background Checker.

It’s always inspirational to surf for ideas.  Here are some examples of image backgrounds:

World Society for the Protection of Animals
Halo Pets
Vet Allergy
Canidae Pet Food
Eagle Pack

There are some online tools that you can use to create a customized Twitter background.  The downside is that most include an advertisement, which is arguably less professional.  It’s still better than using a generic background, however.

Twitter Background Design Tools:

Free Twitter Designer
My Tweet Space

Now that you know how, don’t be afraid to change your customized background to reflect seasons, holidays or promotions.

I look forward to seeing your newly customized Twitter pages, please feel free to share a link to yours in the comments below.

© All Natural Pet Care Blog – Content on this website may NOT be used elsewhere without permission. Content theft will result in legal action. Thank you for respecting the effort that we have put into our original content.

This article was first published by the author on

Both comments and pings are currently closed.

3 Responses to “Customize Your Twitter Page Background (Tutorial) ©”

  1. Desiree says:

    You’d think it would be easy to find a decent twitter tutorial about something as basic as the background but this is the only good one I found. Thanks for saving my behind!

  2. Roger says:

    This is an excellent twitter design tutorial. Thanks for the help.

Powered by WordPress | Designed by: All Premium Themes | Thanks to wordpress themes free, Best Free WordPress Themes and Free WordPress Themes