Create a custom twitter background the right way

Creating your own twitter background is important for several reasons. It gives you a chance to express yourself creatively, it allows you to brand your twitter page in line with the rest of your business branding, it gives you the ability to add extra information such as your contact details, but most importantly it makes your twitter page look unique so that you are not just another face in the crowd of blue cloudy backgrounds.

There are a lot of great twitter background designs out there, but many of them don’t actually display correctly on larger sized monitors (which are becoming pretty popular these days). This is simply because they have not been designed with this in mind. In this post I’ll explain how twitter backgrounds work, the main mistake people make with their twitter background designs and I’ll also show you how to create a twitter background the right way.

How does a twitter background work?

Basically a twitter background is a background image that is applied to the body tag of your twitter page via CSS. This image is always aligned to the top left of the page and can be repeated (tiled) horizontally and vertically once uploaded using the twitter “design settings” panel shown above.

The great twitter background mistake

Are all computer monitors the same size with the same screen resolution? No!  A lot of people forget this when designing their twitter backgrounds. I have seen numerous twitter backgrounds designed to fit a fixed screen resolution of 1024px x 768px. Sure they look great to those using that resolution, but to those with larger monitors with greater resolutions,  your twitter page will simply fall apart.

So just remember that the main center section of your twitter page will always be in the center of the monitor but not necessarily in the center of your background image.

The right way to create a twitter background

Now that we know how twitter backgrounds work we are ready to create a twitter background that will look good on nearly every monitor size. There are three main ways to do this which I will outline below.

Method 1: Use an extra large background image

Using a large background image with a width of 2048px should ensure that your twitter page looks good on nearly all computer screens. Try to keep the file size of the image below 200K just to ensure that it doesn’t take too long to load. Using a large image allows you the greatest flexibility in customizing your twitter page as you have the whole page as your canvas. This is the method I used for my twitter background which can be seen below.

Method 2: Left aligned image that merges into background colour

Another great way to go about creating your twitter background is by creating a graphic that spices up the left hand side of your twitter page and merges into the flat background colour towards the right of the page. This is to ensure that the page will still display correctly on larger resolutions. Below is a great example which uses this method.

Method 3: Repeat a pattern

One of the most common and simple ways to create a twitter background is to create a small pattern graphic and repeat it horizontally and vertically. This will ensure that your background covers any sized monitor but it can be a bit limiting in terms of what you can do with your background design. Here is a nice example of a repeated pattern.

Once you have created your background image simply go to your twitter “Settings -> Design” page and upload it by clicking on the “Change background image” link at the bottom of the page. Here you can also choose to tile the image or not by checking the check box.

Know any other ways to create a twitter background?

If you do it would be great to hear them. Also, if you have any other tips on creating a twitter background please feel free to make a comment below.

Tags: custom twitter background, twitter background, twitter background image, twitter page design