Social Media Design: Twitter Background Images

By Janine Warner, David LaFontaine

The largest image you can add to a Twitter profile is the background image. It’s also the most challenging image in a profile design. In this example, the Twitter background features a photo of Richard Branson, the well-known entrepreneur and owner of Virgin Airlines, looking out the window of an airplane.

You see how the designer intended the background to appear and how well it fits the space on the most popular screen resolution today, which is 1366 x 768 px.

image0.jpg

Here, you see how the background image disappears when the profile is viewed on a monitor with 1024 x 768 px resolution. Having a background disappear on lower-resolution monitors isn’t so bad.

image1.jpg

This is what happens when the page is viewed on a large monitor, with a resolution of 1920 x 1080 px. Branson’s face is blocked by the Twitter profile. This example demonstrates the kind of unflattering results that can happen when a background image is displayed at different resolutions.

image2.jpg

By carefully designing and aligning your background image, you can ensure that visitors to your Twitter profile page will see a pleasing design at any resolution. Test your designs at both the highest practical resolution currently in use (1920 x 1200 px) as well as the lowest (currently 1024 x 768 px).

If you have a monitor large enough to support 1920 x 1200 px resolution, you can test your design at smaller sizes by simply dragging the edge of your browser window to make it smaller. If you don’t have a large monitor, consider testing your Twitter designs on a friend’s computer.