Seamless Twitter Backgrounds

5

How do you create a seamless Twitter background that is compatible with all kinds of user screen resolutions? Two ways. You can either tile a texture image or make your background image blend seamlessly with your background color. To illustrate the second item, take a look at the screenshot below.

twitter-background-sample

I have created a twitter background with 1024 x 768 pixel size and tried it on my twitter page. My current screen resolution is 1280 x 1024. Thus, displaying my small twitter background with larger screen resolution like mine will look like the screenshot above. Quite ugly. While the background isn’t as important as content, it does factor into one’s initial impression of a site. So the trick here is to make your background color blend seamlessly on the right and bottom edges of your background image. So what I did was set the background color to #A4F0FE which is also the background color of the background image (see screenshot below) to make my background image fits nicely on my twitter page. It will display that way on whatever screen resolution, even at 1600 x 1200 pixels.

twitter-background-sample2

To change the Twitter background color, go to Settings > Design > Change Design Colors, then you can either select from the color palette or type the hex color code of your background.

twitter-bgcolor-setting

So if you want to create your own seamless custom Twitter background, you should position most of your content on the upper left portion of your image then maybe some graphics on the right, but avoid bleeding graphic elements on the right and bottom part.

To get you started with your own seamless Twitter background, I have created 10 Twitter backgrounds along with their equivalent background color settings. These backgrounds are in jpeg format, with 1280 x 1024 pixel resolution and should be lighter in file size and decent enough to cover most user screen sizes.

Pysche
Background Color: #000000
psyche-sml

psyche-preview

Rainbow City
Background Color: F4F5C2
rainbow-city-sml

rainbow-city-preview

Royalty
Background Color: #E9D881
royalty-sml

royalty-preview

Twitter 1
Background Color: #A4F0FE
twitter1-sml

twitter1-preview

Twitter 2
Background Color: #A4F0FE
twitter2-sml

twitter2-preview

USA
Background Color: #000066
usa-sml

usa-preview

Wavy Plane
Background Color: #CFC08E
wavy-plane-sml

wavy-plane-preview

Flowers
Background Color: #D3DA64
flower1-sml

flower1-preview

NBA (Basketball Theme)
Background Color: #000000
nba-sml

nba-preview

Pink Easter
Background Color: E287CF
pink-easter-sml

pink-easter-preview

5 comments

  1. website 18 November, 2011 at 13:53

    Terrific paintings! That is the kind of information that are meant to be shared around the web. Disgrace on Google for now not positioning this put up higher! Come on over and talk over with my web site . Thank you =)

  2. social media 5 January, 2012 at 04:58

    hi!,I like your writing so a lot! proportion we communicate extra approximately your article on AOL? I require an expert on this area to solve my problem. May be that’s you! Looking forward to look you.

  3. Kyle Sessions 12 December, 2012 at 16:02

    Hello, i think that i noticed you visited my site so i got here to go back the favor?.I am trying to to find issues to improve my website!I suppose its good enough to use some of your ideas!!

Post a new comment

Recommended for you