How to Create the Perfect Twitter Background?
While plenty has been written about how you can create a great Twitter background, very few have been written on how to create an elegant background without the tweet timeline obstructing the view. Creating a Twitter background can actually be a tricky affair, thanks to the various screen sizes now available. Before the launch of wide-screen monitors (or desktops and laptops alike), users had screen sizes to choose from. There were 640*480, 800*600, 1024*768 and 1280*960 variants available. With the advent of LCD/TFT/LED display technologies, computer screens have been growing at an unprecedented rate. My favourite still remains the latest iMac 27″ from Apple; with a screen real estate of 2560*1440 pixels, this is one huge screened computer. Introductions of larger screens has widened the range of screen sizes from the narrowest at 1024*768 to the widest at 2560*1440.
Your Twitter Background on a 27″
Ever wondered how your Twitter background would look on a massive screen? Try it at your closest Apple showroom and I’m sure you’ll be disappointed. Oddly repeated images, if you’ve selected the tile background option; or a lone cornered image if you haven’t. How does one optimise? While the solution is quite simple, few people actually realise it. The steps mentioned below, take you through a simple process of creating your very own customised Twitter background for your profile:
Step 1: Width of the Twitter timeline = 763 px (on any screen)
Step 2: Width of scroll bar = 15-17 px (always)
Step 3: Total max. width = 780 px (max.)
Step 4: Left free space = (ScreenWidth – 780)/2
For a screen width of 1024 px, Step 4 would yield 122 px as result; while for a screen width of 1280 px (more common in recent laptops), Step 4 would yield 250 px as result. So what does it all mean? Well it means if you want to be safe, ensure that the main image (Logo, Photo etc.) in your twitter background image is not wider than 250 px and is placed in the top left-hand corner. If you want to be really safe, ensure the main image is not wider that 120 px. Height of the image should never exceed 550 px. Now that you have your canvas, feel free to get creative within the space, which would mean you are restricted to the height more than the width.
Meanwhile, if you want to tile (repeat / loop) your background. use the above measurements to sensibly cover the free spaces on both sides. This is an option I would never recommend for professional brands or organisations.
Quick Facts
Safe Size = 250*550 px (for wide-screens)
Super Safe Size = 120*550 px (for old screens)
Do not tile the background image.
I also had a problem like that just a little while ago but thanks to countless experimentation and multiple “trial and errors”, I finally knew how to make the perfect combination of background sizes to keep different monitors and user's preferred screen resolution in mind. After all the time I spent, I wish I would have found your calculations sooner!
By the way, if it helps, I have come across some backgrounds that I have used in my experimentation on finding and making the perfect background sizes with details that can be seen in different screen resolutions and monitors; “cute twitter backgrounds”, “hot twitter backgrounds”, and “retro twitter backgrounds”.