Twitter Backgrounds 101

When I first started checking out some of the custom (and often quite beautiful) Twitter backgrounds people were using to deck out their Twitter profiles with, I noticed that there was a distinct trend towards creating some kind of a fancy-schmancy company logo/photo/design element on the left side of the background such that it would display alongside the white space where your tweets go.

It looks fabulous, yes, and the attempt to make these pages look like they're professionally done is full of good intentions. But quite frankly, there are two distinct problems with this custom background technique:

The CSS background position code that Twitter currently uses at the time of this writing is top left. What this means basically is that the background image you upload to Twitter to use to decorate your profile will be aligned to the top and, most importantly, to the left side of your browser viewport.
Not everybody uses the same screen resolution. Once again at the time of this writing, the latest stats available from the W3C browser display statistics page report that as of January 2009, 36% of all computers have their screen resolution set to 1024 x 768. The rest have various higher (and occasionally even lower) screen resolutions.

Okay so let's cut the gobbledy-geek. What exactly does this mean?

Allow me to demonstrate with a couple of screenshots (don't you just love pictures?)..

Here's a fancy-schmancy background I made for my Twitter profile for demonstrational purposes. Below is a screenshot of how it would look if your screen size was set to 1280 x 1024. As you can see, the "Iron Spider Web Design" logo, the photo and the decorative 'splotch' all display fine along the left side of my Twitter profile.

Twitter background example - 1280 x 1024

Fancy-schmancy left side bar Twitter background at 1280 x 1024 (wide screen)

Now here's a screenshot of my Twitter profile with the same fancy schmancy background image as above except this time the screen size is set to 1024 x 768 (which, as mentioned before, is about 1/3 of all internet users):

Fancy-schmancy left side bar Twitter background at 1024 x 768

Uh oh. Looks like my Iron Spider logo, the photo and the decorative splotch are now partially obscured by the white space where my tweets go. In fact, the whole design element of my fancy-schmancy background is ruined and I look like, well, a bit of a dumbass.

The funny thing is, I've seen a number of big companies (mentioning no names, of course) and even web design firms (!?) make this mistake with their custom Twitter backgrounds. In the case of the latter, one has to wonder what kind of impression they're making on prospective clients who have their screen resolutions set to 1024 x 768.

Soooo....

How Do You Correct the Background Alignment?

In a nutshell, YOU CAN'T. Period. As long as Twitter.com continues to use top left as the value for the background-position property in the Twitter profile CSS code, that's the way it's going to be. The best you can do is be mindful of this situation as you create a custom background for your Twitter profile.

For example, when I worked up my collection of Twitter backgrounds here on Iron Spider, I kept this clearly in mind for each and every background I created. And although some backgrounds do look different in different screen resolutions, I made sure that the 'cutoff' effect that the smaller 1024 x 768 screen size has does not, in effect, blow away any of the designs.

Now, in my humble opinion, I think it would a lot better if the CSS background positioning for Twitter profiles was set to top center as it would a lot easier to create beautiful background images compatible with many different screen resolutions. The reason being is we would be able to design background images with left sidebar design elements that hugged along the left side of the tweets white space section of Twitter profiles regardless of what screen resolution the viewer had set. But as it were, I don't run the internet's latest biggest runaway social media sensation, so hey, what do I know? (Maybe there's a method to their madness?)

Custom Twitter Background Design Tips

So the bottom line is, if you do want to put some design element in your Twitter background such that it will display along the left side of your Twitter web page, you have about 120 pixels of horizontal space free along the left side of your background image to work with. Anything wider than that and it will start to get obscured by the white space section where your tweets go if the viewer is using 1024 x 768 screen resolution.

Twitter background example - 120 pixels free space on the left side

When creating a custom Twitter background, you have
about 120 pixels of free space on the left side

And of course, you're going to want to set your background dimensions at 1280 x 1024. This will cover this screen resolution and lower. If you make your background bigger in an attempt to accomodate even larger screen resolutions you'll probably be spreading yourself a little to thin with regards to compatibility.

And don't forget to test out your background in a number of screen resolutions, most specifically 1024 x 768 and 1280 x 1024. Otherwise you may potentially come off looking like a total dumbarse to about 1/3 of your viewers. Some exceptions to this rule is if you are sure that in your particular niche, a vast majority of your users are going to be using wider screen resolutions. Now offhand I can't think of what those niches might be but I'm sure there are some. In this case, it's a matter of knowing your viewers well enough to be able to blow off catering to smaller screen sizes.

And what exactly is my screen resolution, you may ask?

CLICK HERE TO FIND OUT.

How to Change Your Screen Resolution

Assuming you're using Windows XP, do the following:

Go to your Windows desktop
Right click anywhere on empty space and then click on Properties » Settings and you'll get a dialog looking something like this:
Drag the bar to Less or More to decrease or increase your screen resolution respectively and then click OK to apply settings.