Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Effective Twitter Backgrounds: Examples and Current Practices

Smashing Magazine has been on Twitter for about a year now (@smashingmag1), and it turned out to be a great medium to communicate with our audience, build connections, discuss design-related topics and give away some nice prizes. However, even a year later, we still don’t have a Twitter background page and now is a good time to change that. So because we decided to create our own Twitter page, we wanted to first find out how other designers do it and what tips and techniques they use to create a truly outstanding, beautiful Twitter page.

You may want to take a look at the following related posts:

Your profile page is the only place on Twitter where you get opportunity to showcase your visual brand and possibly communicate additional information that can last longer than a tweet. You can customize your profile page by changing background, text and link colors. It’s as simple as changing the skin, but ability to change background image has allowed designers to create really unique profile pages.

Primary focus of this article is to explore various techniques to create unique, memorable and effective Twitter profile pages. However, before proceeding to the list, it is important to briefly discuss the structure of the Twitter profile page.

Twitter Profile Page Link

Most important thing to note is that the main content block in the layout of a Twitter profile page has the fixed width of 765 pixels, and it is always centered. This is good, because it makes it possible for you to show your background image using the extra space created on the both sides of the block when displayed at higher resolutions.

1280 Wide Screen Resolution

1024 Wide Screen Resolution

Other things that you should keep in mind:

  • timeline background is always white
  • menu bar background is always white
  • footer bar background is always white
  • logo is always the Twitter logo
  • picture can be changed
  • you can change text color, link color, sidebar background color and sidebar border color
  • you can change background image and background color
  • you can also tile background image
  • the background image start position is always top left corner

Note that if you are only interested in designing a nice profile page, you can easily do that by incorporating a stunning background image and customizing text, link and sidebar colors accordingly. But if your intentions are to be unique, incorporate brand identity and communicate additional information, then you will need to be little bit more creative with your background image.

Tips & Techniques Link

Following is a list of profile pages, illustrating various tips & techniques that you can incorporate in your own backgrounds. Please note that most of these profile pages incorporate more than one technique, and you should also consider mixing multiple techniques according to your own requirements.

Merge Background With Timeline / Sidebar Link

This is probably the least used technique among all tips and techniques discussed here. By merging your background graphics with timeline and/or sidebar, you can create a unique layout with a very distinctive look and form.

@adamplitt617

@adamplitt628

@adamplitt639

@gaksdesigns10

@gaksdesigns11

@gaksdesigns12

Mix Tiled Pattern With Other Graphics Link

Twitter allows you to integrate one background image that can be either tiled or not. But you can create unique look for your profile page by creating a background image that has both.

@spurrachel

@spurrachel

@spurrachel

Reveal More With Your Pictures Link

Your profile picture (it can be an avatar, logo or photo) is your main identity on Twitter; it will be displayed next to every tweet that you send out to your followers. For instance, you can use a background image that is somehow related to your profile picture and thus convey more information about yourself or your brand. In other words, you can use this classic approach of creating design around your logo or brand identity to communicate information in a more effective way.

@Doubleolee13

@Doubleolee14

@Doubleolee15

@mailchimp16

@mailchimp17

@mailchimp18

Reveal More With The Page Peel Effect Link

If you have an established visual identity, you can use page peel effect to show users who is actualy behind the Twitter profile. This technique provides you with a freedom to design the rest of the background as you wish, because you may no longer need to worry about integrating brand visuals and its colors.

@sitepointdotcom19

@sitepointdotcom20

@sitepointdotcom21

@benek22

@benek23

@benek24

Add Personalized Sidebar To Your Profile Link

The following profiles illustrate a specific use of the first technique by adding sidebars to the layout. You can add such panels to effectively highlight additional information that you want to communicate.

@aaronmillerillz25

@aaronmillerillz26

@aaronmillerillz27

@robingood28

@robingood29

@robingood30

@sickbrain31

@sickbrain32

@sickbrain33

Show Yourself Link

In social media world, you are the brand. With Twitter, being one of the major players in social media, showing yourself on the profile page can be very effective way of strengthening your brand and community around your website.

@problogger34

@problogger35

@problogger36

@unmarketing37

@unmarketing38

@unmarketing39

Use Icons and Logos Link

Following profiles illustrate simple, yet very effective technique to communicate association with or involvement in certain community, service, skill, etc by showcasing relevant icons or logos.

@lanesa40

@lanesa41

@lanesa42

@rjacquez43

@rjacquez44

@rjacquez45

Add a Header Bar Link

Adding a header bar could be used for creating unique look for your profile page, but it can also be used to separate Twitter logo and top menu (which contain links to user’s profile) from the rest of your page.

@thegraphicmac46

@thegraphicmac47

@thegraphicmac48

@elitistsnob49

@elitistsnob50

@elitistsnob51

Less is More Link

Andre Gide once said that “Art is a collaboration between God and the artist, and the less the artist does the better”. Here are few illustrations of how minimalism can be used to its full effect:

@line25blog52

@line25blog53

@line25blog54

@idesignstudios55

@idesignstudios56

@idesignstudios57

Accommodate the 1024px Width Link

If you care how your profile page will appear on 1024px wide screens, you will need to work near the top and left borders of your background image. Here is an example of how a nice visual design can be used properly for various screen resolutions:

@SohTanaka58

@SohTanaka59

@SohTanaka60

Here is another interesting technique to ensure that your profile page has a very similar look on both 1024 and 1280px wide resolutions:

@adamplitt617

@adamplitt628

@adamplitt639

Use Typography Link

Use of typography in Twitter backgrounds is not very common; however if used creatively, you can create unique, very effective profile pages to communicate additional information.

@dickieadams64

@dickieadams65

@dickieadams66

@iamFinch67

@iamFinch68

@iamFinch69

Put Information In a Memorable Way Link

Composition is the plan, placement or arrangement of the elements. You can arrange elements on your background in a unique and memorable, showcasing information that is important to you and your readers. This techniques allows you to create an environment, show your personality and provide additional information.

@sharebrain70

@sharebrain71

@sharebrain72

@iamkhayyam73

@iamkhayyam74

@iamkhayyam75

Do Whatever You Want To Do Link

The more original, creative and distinctive your background image is, the more likely it is to be memorable and strengthen your online presence. Experiment with beautiful, personalized illustrations, background images and typography. Make sure that your background image has a personal voice, doesn’t look generic and has an unusual twist. Your first time visitors will appreciate it.

@ramesstudios76

@ramesstudios77

@NIK0_BELLIC78

@NIK0_BELLIC79

Now that we discussed a couple of techniques for the design of Twitter backgrounds, here is a collection of some well-designed profile pages to tame your appetite for Twitter profile page inspiration.

@MdFilmFestival80

@MdFilmFestival81

@fragments7782

@fragments7783

@happytreefriend84

@happytreefriend85

@LoungeKat86

@LoungeKat87

@ellingson88

@ellingson89

@hootsuite90

@hootsuite91

@G_Obieta92

@G_Obieta93

@willbryantplz94

@willbryantplz95

@grant_clark96

@grant_clark97

@hugeinc98

@hugeinc99

@JJunkins100

@JJunkins101

@Baldy67102

@Baldy67103

@thelaughbutton104

@thelaughbutton105

@bickov106

@bickov107

@jayjdk108

@jayjdk109

@nathanhoad110

@nathanhoad111

@robertomas112

@robertomas113

@mayhemstudios114

@mayhemstudios115

@ThirstEase116

@ThirstEase117

@cameronolivier118

@cameronolivier119

@studio3k120

@studio3k121

@sixreffie122

@sixreffie123

@TheTwiddict124

@TheTwiddict125

@mountainash126

@mountainash127

@Hallisar128

@Hallisar129

@mywayhome130

@mywayhome131

@TheArtificer132

@TheArtificer133

@webdude75134

@webdude75135

@colourofair136

@colourofair137

@jodyphillips138

@jodyphillips139

@emilychang140

@emilychang141

@ijustine142

@ijustine143

@boagworld144

@boagworld145

@collis146

@collis147

@chrisspooner148

@chrisspooner149

@webb_art150

@webb_art151

@Hicksdesign152

@Hicksdesign153

@rww154

@rww155

@ThemeForest156

@ThemeForest157

@technikwuerze158

@technikwuerze159

@Designfeedr160

@Designfeedr161

@Malarkey162

@Malarkey163

@Trenti164

@Trenti165

@zomigi166

@zomigi167

@carsonified168

@carsonified169

@WiliamAu170

@WiliamAu171

@wpbeginner172

@wpbeginner173

@brandonacox174

@brandonacox175

@inspiredmag176

@inspiredmag177

@guardiantech178

@guardiantech179

@DesignerDepot180

@DesignerDepot181

@carywood182

@carywood183

@designia184

@designia185

@_finderskeepers186

_finderskeepers187

Tools Link

  • Twitter Background Template: Free Twitter Background template in PSD format from “Fuel Your Creativity”, includes guides that match up with different resolutions from 800×600 to 1900×1200.
  • Peekr: A bookmarklet that you can drag to your browser’s toolbar and click on to see a twitter user’s entire background graphic and then click again to get things back to normal.
  • Twitter Background Checker: Lets you check how your Twitter profile looks in smaller or higher resolutions.
  • ClickableNow188: Add Clickable Links to your Twitter background image.

Additional Resources Link

Footnotes Link

  1. 1 http://www.twitter.com/smashingmag
  2. 2 https://www.smashingmagazine.com/2009/02/8-useful-tips-to-become-successul-with-twitter/
  3. 3 https://www.smashingmagazine.com/2009/02/8-useful-tips-to-become-successul-with-twitter/
  4. 4 https://www.smashingmagazine.com/2009/01/friday-freebies-flavours-icon-set-and-cute-tweeters-icon-set/
  5. 5 https://www.smashingmagazine.com/2011/10/freebie-twitter-ui-gui-psd/
  6. 6 https://www.smashingmagazine.com/2011/12/freebie-new-twitter-profile-page-gui-psd/
  7. 7 http://twitter.com/adamplitt
  8. 8 http://twitter.com/adamplitt
  9. 9 http://twitter.com/adamplitt
  10. 10 http://twitter.com/gaksdesigns
  11. 11 http://twitter.com/gaksdesigns
  12. 12 http://twitter.com/gaksdesigns
  13. 13 http://twitter.com/Doubleolee
  14. 14 http://twitter.com/Doubleolee
  15. 15 http://twitter.com/Doubleolee
  16. 16 http://twitter.com/mailchimp
  17. 17 http://twitter.com/mailchimp
  18. 18 http://twitter.com/mailchimp
  19. 19 http://twitter.com/sitepointdotcom
  20. 20 http://twitter.com/sitepointdotcom
  21. 21 http://twitter.com/sitepointdotcom
  22. 22 http://twitter.com/benek
  23. 23 http://twitter.com/benek
  24. 24 http://twitter.com/benek
  25. 25 http://twitter.com/aaronmillerillz
  26. 26 http://twitter.com/aaronmillerillz
  27. 27 http://twitter.com/aaronmillerillz
  28. 28 http://twitter.com/robingood
  29. 29 http://twitter.com/robingood
  30. 30 http://twitter.com/robingood
  31. 31 http://twitter.com/sickbrain
  32. 32 http://twitter.com/sickbrain
  33. 33 http://twitter.com/sickbrain
  34. 34 http://twitter.com/problogger
  35. 35 http://twitter.com/problogger
  36. 36 http://twitter.com/problogger
  37. 37 http://twitter.com/unmarketing
  38. 38 http://twitter.com/unmarketing
  39. 39 http://twitter.com/unmarketing
  40. 40 http://twitter.com/lanesa
  41. 41 http://twitter.com/lanesa
  42. 42 http://twitter.com/lanesa
  43. 43 http://twitter.com/rjacquez
  44. 44 http://twitter.com/rjacquez
  45. 45 http://twitter.com/rjacquez
  46. 46 http://twitter.com/thegraphicmac
  47. 47 http://twitter.com/thegraphicmac
  48. 48 http://twitter.com/thegraphicmac
  49. 49 http://twitter.com/elitistsnob
  50. 50 http://twitter.com/elitistsnob
  51. 51 http://twitter.com/elitistsnob
  52. 52 http://twitter.com/line25blog
  53. 53 http://twitter.com/line25blog
  54. 54 http://twitter.com/line25blog
  55. 55 http://twitter.com/idesignstudios
  56. 56 http://twitter.com/idesignstudios
  57. 57 http://twitter.com/idesignstudios
  58. 58 http://twitter.com/SohTanaka
  59. 59 http://twitter.com/SohTanaka
  60. 60 http://twitter.com/SohTanaka
  61. 61 http://twitter.com/adamplitt
  62. 62 http://twitter.com/adamplitt
  63. 63 http://twitter.com/adamplitt
  64. 64 http://twitter.com/dickieadams
  65. 65 http://twitter.com/dickieadams
  66. 66 http://twitter.com/dickieadams
  67. 67 http://twitter.com/iamFinch
  68. 68 http://twitter.com/iamFinch
  69. 69 http://twitter.com/iamFinch
  70. 70 http://twitter.com/sharebrain
  71. 71 http://twitter.com/sharebrain
  72. 72 http://twitter.com/sharebrain
  73. 73 http://twitter.com/iamkhayyam
  74. 74 http://twitter.com/iamkhayyam
  75. 75 http://twitter.com/iamkhayyam
  76. 76 http://twitter.com/ramesstudios
  77. 77 http://twitter.com/ramesstudios
  78. 78 http://twitter.com/NIK0_BELLIC
  79. 79 http://twitter.com/NIK0_BELLIC
  80. 80 http://twitter.com/MdFilmFestival
  81. 81 http://twitter.com/MdFilmFestival
  82. 82 http://twitter.com/fragments77
  83. 83 http://twitter.com/fragments77
  84. 84 http://twitter.com/happytreefriend
  85. 85 http://twitter.com/happytreefriend
  86. 86 http://twitter.com/LoungeKat
  87. 87 http://twitter.com/LoungeKat
  88. 88 http://twitter.com/ellingson
  89. 89 http://twitter.com/ellingson
  90. 90 http://twitter.com/hootsuite
  91. 91 http://twitter.com/hootsuite
  92. 92 http://twitter.com/G_Obieta
  93. 93 http://twitter.com/G_Obieta
  94. 94 http://twitter.com/willbryantplz
  95. 95 http://twitter.com/willbryantplz
  96. 96 http://twitter.com/grant_clark
  97. 97 http://twitter.com/grant_clark
  98. 98 http://twitter.com/hugeinc
  99. 99 http://twitter.com/hugeinc
  100. 100 http://twitter.com/JJunkins
  101. 101 http://twitter.com/JJunkins
  102. 102 http://twitter.com/Baldy67
  103. 103 http://twitter.com/Baldy67
  104. 104 http://twitter.com/thelaughbutton
  105. 105 http://twitter.com/thelaughbutton
  106. 106 http://twitter.com/bickov
  107. 107 http://twitter.com/bickov
  108. 108 http://twitter.com/jayjdk
  109. 109 http://twitter.com/jayjdk
  110. 110 http://twitter.com/nathanhoad
  111. 111 http://twitter.com/nathanhoad
  112. 112 http://twitter.com/robertomas
  113. 113 http://twitter.com/robertomas
  114. 114 http://twitter.com/mayhemstudios
  115. 115 http://twitter.com/mayhemstudios
  116. 116 http://twitter.com/ThirstEase
  117. 117 http://twitter.com/ThirstEase
  118. 118 http://twitter.com/cameronolivier
  119. 119 http://twitter.com/cameronolivier
  120. 120 http://twitter.com/studio3k
  121. 121 http://twitter.com/studio3k
  122. 122 http://twitter.com/sixreffie
  123. 123 http://twitter.com/sixreffie
  124. 124 http://twitter.com/TheTwiddict
  125. 125 http://twitter.com/TheTwiddict
  126. 126 http://twitter.com/mountainash
  127. 127 http://twitter.com/mountainash
  128. 128 http://twitter.com/Hallisar
  129. 129 http://twitter.com/Hallisar
  130. 130 http://twitter.com/mywayhome
  131. 131 http://twitter.com/mywayhome
  132. 132 http://twitter.com/TheArtificer
  133. 133 http://twitter.com/TheArtificer
  134. 134 http://twitter.com/webdude75
  135. 135 http://twitter.com/webdude75
  136. 136 http://twitter.com/colourofair
  137. 137 http://twitter.com/colourofair
  138. 138 http://twitter.com/jodyphillips
  139. 139 http://twitter.com/jodyphillips
  140. 140 http://twitter.com/emilychang
  141. 141 http://twitter.com/emilychang
  142. 142 http://twitter.com/ijustine
  143. 143 http://twitter.com/ijustine
  144. 144 http://twitter.com/boagworld
  145. 145 http://twitter.com/boagworld
  146. 146 http://twitter.com/collis
  147. 147 http://twitter.com/collis
  148. 148 http://twitter.com/chrisspooner
  149. 149 http://twitter.com/chrisspooner
  150. 150 http://twitter.com/webb_art
  151. 151 http://twitter.com/webb_art
  152. 152 http://twitter.com/Hicksdesign
  153. 153 http://twitter.com/Hicksdesign
  154. 154 http://twitter.com/rww
  155. 155 http://twitter.com/rww
  156. 156 http://twitter.com/ThemeForest
  157. 157 http://twitter.com/ThemeForest
  158. 158 http://twitter.com/technikwuerze
  159. 159 http://twitter.com/technikwuerze
  160. 160 http://twitter.com/Designfeedr
  161. 161 http://twitter.com/Designfeedr
  162. 162 http://twitter.com/Malarkey
  163. 163 http://twitter.com/Malarkey
  164. 164 http://twitter.com/Trenti
  165. 165 http://twitter.com/Trenti
  166. 166 http://twitter.com/zomigi
  167. 167 http://twitter.com/zomigi
  168. 168 http://twitter.com/carsonified
  169. 169 http://twitter.com/carsonified
  170. 170 http://twitter.com/WiliamAu
  171. 171 http://twitter.com/WiliamAu
  172. 172 http://twitter.com/wpbeginner
  173. 173 http://twitter.com/wpbeginner
  174. 174 http://twitter.com/brandonacox
  175. 175 http://twitter.com/brandonacox
  176. 176 http://twitter.com/inspiredmag
  177. 177 http://twitter.com/inspiredmag
  178. 178 http://twitter.com/guardiantech
  179. 179 http://twitter.com/guardiantech
  180. 180 http://twitter.com/DesignerDepot
  181. 181 http://twitter.com/DesignerDepot
  182. 182 http://twitter.com/carywood
  183. 183 http://twitter.com/carywood
  184. 184 http://twitter.com/Designia
  185. 185 http://twitter.com/Designia
  186. 186 http://twitter.com/_finderskeepers
  187. 187 http://twitter.com/_finderskeepers
  188. 188 http://www.clickablenow.com/
  189. 189 http://www.blog.spoongraphics.co.uk/tutorials/twitter-background-design-how-to-and-best-practices
  190. 190 http://www.creativepro.com/article/design-unique-twitter-background
  191. 191 https://www.smashingmagazine.com/2009/01/07/textures-in-modern-web-design/
  192. 192 https://www.smashingmagazine.com/2009/03/04/15-useful-twitter-plugins-and-hacks-for-wordpress/
  193. 193 https://www.smashingmagazine.com/2009/02/03/8-useful-tips-to-become-successul-with-twitter/
  194. 194 https://www.smashingmagazine.com/2009/03/17/99-essential-twitter-tools-and-applications/
  195. 195 https://www.smashingmagazine.com/2009/06/24/birdies-cute-free-twitter-icons-for-your-blog/

↑ Back to top Tweet itShare on Facebook

Saud Khan is a software/web developer and consultant with over 12 years of professional experience. He is also founder of W3Avenue, an online publication providing advice & resources for rapid web development. You can also follow him on Twitter. http://twitter.com/w3avenue

  1. 1

    Great article. I have to create mine soon. :)

    0
  2. 2

    I think you the twitter background should match the product / service / person it is trying to depict. Sitepoint was great! . Check our classifieds revolution at
    Localads Twitter

    0
  3. 3

    Thanks For all the tools, guides, and Inspiration! Maybe my background can make the next list @madesigns

    0
  4. 4

    Designers should also remember that many people use screen resolutions with a height greater than the 900 or so that is standard on a 19″ widescreen. Many use 1024 height (for example, 1280 x 1024) or taller. @adamplitt’s background looks cool but on a 1024-tall window it is cut off at the bottom. The best thing to do is make your background image fade into your background color.

    0
  5. 5

    I think this eclectic background is cool.
    @Jacob_DeGrade

    0
  6. 6

    I still fail to find Twitter fun or usefull or whatever… :/

    1
  7. 7

    helpful. thank you. not many people actually view twitter from the homepage now do they? well its a lot less before.

    0
  8. 8

    Thanks for the mention. @webb_art

    0
  9. 9

    Thanks for the tips. I need to revisit my messy background.

    0
  10. 10

    People need to remember to create their twitter backgrounds for various screen resolutions. Lots of these backgrounds look great in the screenshots, but they look awful on my monitor (1900×1280).

    1
  11. 11

    Great Article, it’d be great to make the round two of this list.

    @aubreyjohnson

    0
  12. 12

    Great works =]

    0
  13. 13

    Cool post, I like to think mine is also pretty good and at the level of being exposed, check it here: http://twitter.com/h1brd

    0
  14. 14

    Some nice examples – The first one’s a good idea but it resizes pretty poorly. Us mac kinds don’t normally conform to standard screen sizes.

    0
  15. 15

    Hey hey … thx for the mention! :)

    0
  16. 16

    They should support more background options (CSS)
    Centered positioning of the background would be nice to have?!

    0
  17. 17

    Cool. I just keep my as simple as possible @IvanBernat

    0
  18. 18

    Great stuff. While I find Twitter too narcissistic to justify a personal page, our news station has one, and we incorporate ti into the show as a way for viewers to interact with stories. The anchors can read responses right from the laptops on their desks.

    0
  19. 19

    Unfortunately all this works with a certain screen resolution.

    0
  20. 20

    Thanks for the mention! I have to agree with an earlier comment though, I hardly ever use my actual Twitter homepage to update, although I still enjoy looking at other peoples’ backgrounds and content through the Twitter site.

    @grant_clark

    0
  21. 21

    I agree with a lot of the commenters here that you need to take screen resolution as a main factor. while @adamplitts looks good, it only looks good when your screen is at the exact res that it was built for. It would make it a lot better to do one like that if twitter were to give us the option of making our background image centered along with the rest of the site.

    While backgrounds won’t necessarily look the same from a netbook to a 24 inch screen with a 1920×1200 screen size, I think it is important that we take them all into consideration when making the designs for this. I am not saying I am perfect at this, but it is all something we need to consider…

    @justinruess

    0
  22. 22

    This was an excellent roundup. Thanks for including our site @wpbeginner

    You did miss out a few other great backgrounds like @bkmacdaddy or my personal one @syedbalkhi , and @realmtnboy

    All to all an excellent roundup :)

    0
  23. 23

    I like my twitter layout. It’s the jizz. @omgitslittlet

    0
  24. 24

    Todd (@CantonDog)

    September 18, 2009 7:43 am

    Great list. I’ve always thought my background was good (@CantonDog), but now I’m thinking I should be a bit more creative. This is good inspiration. Thanks.

    0
  25. 25

    Great list!
    I also run a site with a gallery of Twitter backgrounds if others are looking for inspiration. http://www.twitter-gallery.com

    0
  26. 26

    @Aaron Besson
    @h1brd
    Both nice designs but same issues with screen size, they don’t reach the bottom of the screen.

    0
  27. 27

    Excellent. Really useful information all in the one place. Just what I need. thanks

    0
  28. 28

    They may not have the most followers but they sure have the most effective marketing or branding I can see. Mine is simple but I love the comfortable and cozy feeling I get when I see it @jonharules

    0
  29. 29
  30. 30

    Helga Grotewold

    September 18, 2009 8:06 am

    @helgita89 :)

    0
  31. 31

    Wow!!!..What an inspiring post!!…Thanks!

    0
  32. 32

    What about @sciencebase His is pretty neat, narrow sidebar, nothing hidden behind the main screens etc…

    0
  33. 33

    Great article and some wonderfull designs. At Douro Azul, a Portuguese cruising company, we did the study you show at the beginning of the article to creat our twitter profile background. There’s a lot of trial and error untill you get the perfect balance. Also, when you represent a brand you have to guarantee that your twitter profile page is alligned with your overall corporate image. I think our design team did ok. You should check it at twitter.com/DouroAzul

    Btw, @adamplitt has, imho, the best and more creative background.

    0
  34. 34

    Thank you for the mention @gaksdesigns
    Much appreciated!

    0
  35. 35

    great collection! those are some amazing backgrounds. I think i need an update… @printedproof

    -1
  36. 36

    Great article. Cool to see how limitations and constraints can help creativity really take off. (Oftentimes much easier to get some initial boundaries than hearing from a client “Just do whatever you want”). I really like the fuller, more complicated designs on here, but went with clean and simple for mine – @aptdesign

    1
  37. 37

    I thought it was a confusing article. I expected a list of best practices, and then was given a list of a bunch of things to add….followed by “less is more”….followed by “do whatever you want to do”.

    Design is about communication. And when ‘best practices’ cause communication to be lost on potential clients and customers, I think there’s a disconnect from best practice. I’ve been struggling with the best way to do this, myself, was excited about seeing this article.

    Was a great showcase of art. Could revisit the best practices idea again in the future.

    1
  38. 38

    nice and informative post…

    0
  39. 39

    Thank you for not including a whole ton of social media douchebag backgrounds. I cannot stand the people who put way, way, way too much contact info and “fake” (non-clickable) janky non-links in their background graphics.

    0
  40. 40

    I always wondered when SmashingMagazine would give into the Twitter background crap…

    0
  41. 41

    Sadly, like many others I see the problem as being the centering.

    The variable widths that people keep their browsers really can damn your view. Twitter would be doing a service if we could pick alignments. Like ‘X px from left’, aligned left, or centered.

    Then we would REALLY be able to theme.

    0
  42. 42

    cool! super cool post!

    0
  43. 43

    Excellent! Thank you.

    0
  44. 44

    Anibal Blasutti

    September 18, 2009 10:27 am

    BUUU :(
    They doesn’t work in widescreen resolution. Twitter content ALWAYS work based in center alignment.
    Most of this examples doesn’t look so good as S.M. is showing.

    Smashing Magazine, I’ll continue reading your post, ILOVE YOU. :)

    0
  45. 45

    Marcel Santilli

    September 18, 2009 7:47 pm

    Great post! Just inspired me to redesign my Twitter background.

    This is what I did with mine –

    0
  46. 46

    Nice to see Tyler Stewart of Barenaked Ladies on the list.

    0
  47. 47

    Dreamweaver developers will like this one. The height is based on 72px per inch.

    0
  48. 48

    Thanks for including mine. This is a wonderful and inspiring list.

    0
  49. 49

    Why, why, why? I’m not in this list? Whyyyy!!! (crying out of load)
    I change my Twitter every hour just for Smashing Magazine! BoooOOuuUh!!! They still ignore me even if the CEO is my cousin! http://twitter.com/10dier – Whyyyyyyyyyyy.
    Life is so cruel with me!!!

    (I know, I should take a rest ; )

    0
  50. 50

    Wow. Thanks for the mention! The best part of my background is only visible to a discriminating eye or someone who has a big up massive display.

    Here’s a link to see the full meal deal:
    http://j.mp/1HDNPc

    Once again, thanks for the mention and can’t tell you how important it is to leave Easter Eggs for people. It’s always fun and the only interactive part that you could possibly implement into your background.

    And remember, it’s ok to believe… you are beautiful :)

    0
  51. 51

    Great roundup! I love twitter and peekr is sooo cool!

    0
  52. 52

    Man, if I see wood and a coffee cup in a background graphic, i’m going to barf. It’s lame and over.

    0
  53. 53

    “HUGE” went really lame and obvious with this background. I would expect more from a large agency like that. The rest are all drivel and totally not original.

    -1
  54. 54

    Thanks for mentioning me in the list, and for all the other great backgrounds. Some really talented people out there!

    0
  55. 55

    you are so missing mine, Toronto from the top

    0
  56. 56

    nice one! gonna design for my twitter too :)

    0
  57. 57

    Thanks for all the attention…. positive and negative. I wanted to make my idea work on all resolutions but it is simply impossible. Therefore, I chose to maximize the number of viewers with screen resolutions that would correctly display my background. The majority of twitters (and surfers in general) utilize the most common screen resolution, which is 1024 and 1280 in width. I know that there will still be loads of visitors who won’t see it correctly, but the idea, imho, was just too cool to pass.

    Change your resolution to 1024 x 768 and you will be viewing the web like the majority of other users… otherwise, you might just miss out on something pretty dedgum awesome. I know, I know… this resolution isn’t visually the best, but it is the most common. I use two monitors and extend my desktop for a more efficient working/relaxing environment. This way I can set each monitor to display different resolutions.

    Thanks again…

    be unique. be yourself. be a be a.

    0
  58. 58

    Thanks alot of adding mine with the rest! Great collections!

    0
  59. 59

    Marcel Santilli

    September 18, 2009 7:47 pm

    Great post! Just inspired me to redesign my Twitter background.

    This is what I did with mine –

    0
  60. 60

    Thanks~ it’s really inspiring post~

    0
  61. 61

    Good info. Yall check out my custom page. @Frank_Whyte

    0
  62. 62

    Love it! Might have to use some of these techniques! Cheers and thanks for a great read.

    Matt

    0
  63. 63

    I probably should read through the comments above to see if others are talking about this… but… HOLY CRAP!!! So many of those twitter pages look terrible if your browser isn’t set to maximum width!

    Twitter doesn’t center page backgrounds even though content on the page is centered. Here’s a perfect example of bad design:
    http://twitter.com/adamplitt

    On my screen, I see THREE sets of fingers. One on the left and two on the right. Talk about not paying attention to details.

    0
  64. 64

    Hi ! Really inspiring and actual info for background-designers.
    How about 1280+ resolution like 1600×1200, 1920×200 and may be even 2560×1600 ?
    p.s. Just finished working on @zoknowsgaming background – is it deserve to be in your list ?
    @romarto

    0
  65. 65

    awesome examples, thanks for including mine!

    0
  66. 66

    Mithun P Sreedharan

    September 19, 2009 1:35 am

    I think you people missed my page ;-) http://twitter.com/mithunp

    0
  67. 67

    wow, i love this post :P
    thanks for your great collections :)

    0
  68. 68

    these design teqnics should / could also be applied to youtube. Im going to do so in a new project.

    0
  69. 69

    Good article and a great collection of screenshots.

    I did my twitter background a while ago, any feedback?
    @shazboy

    0
  70. 70

    Wow, lots of shameless plugs and spam in the comments ( tubebutler, really?)

    Either way, until Twitter supports CSS, centering is next to impossible to do, there will always be a black band around the background. Some of these look good, others look like utter shite on 1920×1200.

    0
  71. 71

    Thanks for the mention and including me with some of best awesome designs :)

    0
  72. 72

    Awesome! Now I don’t have to spend any time being creative!

    0
  73. 73

    Great and inspirational post. I will remake my twitter page someday, right now it looks kinda simple, but still nice. Go check it out http://twitter.com/gatisstrods

    0
  74. 74

    what I still it amazing the amount narcissism that is out there, and how Twitter just fuels so many! Why would I want to follow the every “important thought” you have? Why do you feel the need to tell everyone your every thought… and why do I have to look at your ugly mugs now too! How many of these self-involved idiots out there thought “ooh I gotta setup up a portrait session with someone so I can have some fresh pics for my twitter background”… They say in fashion, each decade comes around again… I’d say the 70’s “Me Decade” is coming back… and in greater numbers!

    1
  75. 75

    Stop wasting your time tweeting when the end of the world is at hand! Join the fight at !

    0
  76. 76

    @Allen

    AMEN to that.

    1
  77. 77

    thanks for including me in such a great list of background designs, I’m honored!

    0
  78. 78

    Floris Fiedeldij Dop

    September 20, 2009 2:44 am

    awesome

    0
  79. 79

    Another great article! Love you guys!!

    0
  80. 80

    and by thanks, I mean, this thingummy here :

    0
  81. 81

    I love it! Updated my twitter today!

    0
  82. 82

    this is amazing! i edited my bg before so it’s aligned axactly in my twitter feed wallbut it doesn’t show the same way in our widescreen pc. so how do i get to have my bg exact;y the way i want it to appear? i don’t know the right measurements.

    i had an idea before like the one with the hand gripping the page (but not that one) and i don’t know if i’m wasting my time making it look properly on my laptop when it doesn’t look properly in a desktop pc. help me!

    0
  83. 83

    It’s fairly simple to configure your background to work with most screen resolutions.

    Mine is set up, so you can read all the details I want the visitor to see on good ‘ol 1024×768, 1280×1024 and higher.

    The trick is in the placement of your important information and graphics.

    You need to place your website URLs or whatever important details you want more than once, in different postitions, so that the relevant one will show up on the corresponding screen resolution.

    Some of those backgrounds by the way are really boring. Did they make the list more because they’ve got loads of followers?

    0
  84. 84

    Too many of those are too busy and they only look good on a few or, worse…only one resolution.

    0
  85. 85
  86. 86

    I created a pattern, if you want to take a look :) http://twitter.com/jeremylv

    0
  87. 87

    Thanks! Check out the BG I made, maybe you’ll include mine next time: @acm55

    0
  88. 88

    These are all great! I wish I had seen this before I redid my background. I’m quite pleased with mine though. It could have been a contender for this post. Maybe. I dont know, what do you think?

    http://www.twitter.com/g_daniels

    0
  89. 89

    Nice collection ; )

    Ok, so my twitter – http://www.twitter.com/brainwarestudio

    yo

    0
  90. 90

    twitterism.
    made this background some moths ago in an affect of stylism with all my designism i could raise with playism!
    http://twitter.com/theimo

    0
  91. 91

    Cool article :)

    0
  92. 92

    I think mine is good too :) check it out

    0
  93. 93

    Check our out, @morganwebdesign ! what do you think?

    0
  94. 94

    The belief that one should design a page for maximized wide screen users is a bit, how do I say, exclusive? Absurd? Try looking at these pages in 1024×768 sometime. They look absurd.

    0
  95. 95

    Some pretty neat designs!

    0
  96. 96

    Regarding http://twitter.com/elitistsnob ‘s background : What tool would you use to create that “border” between two parts of the image ?

    0
  97. 97

    Very cool backgrounds!

    0
  98. 98

    Awesome selection!!
    I wont be original but I’ll showcase some too :P
    @BaZookaPL
    @fredaudet
    @cstyves

    0
  99. 99

    Am I the only person in existence who refuses to let their browser take up their whole screen? I always have other things going on and like to keep it relatively unobtrusive – about 1k pixels wide – even though I have a widescreen monitor.

    That’s the thing that bugs me about left-sidebar Twitter backgrounds. The words/images always get cut off to the point that the background ends up looking unprofessional.

    And your average client/casual user isn’t going to know that you had no control over that. They’re going to think that you didn’t know what you were doing. Hell, that’s what I think every time I open a Twitter page to see a witty sidebar all cut off and looking stupid.

    I personally see no point in creating elaborate left sidebars. In my opinion, current best practice for Twitter backgrounds would be:

    – no text
    – abstract imagery preferred
    – imagery that makes sense whether you see 10 pixels of it or the beautiful 200 pixel creation of your dreams (the one you imagine your viewers are seeing)

    0
  100. 100

    Thanks so much for the mention! (On Twitter, I’m @carywood.) I must tell you, though, that my background was actually designed by @natalie who sells very reasonably priced backgrounds at http://twitterpatterns.com. The one I use isn’t there; I purchased it ages ago.

    One I love that I don’t see here is Grace Smith’s. @gracesmith. Love the chalkboard, the info, what you see if you expand your browser width, etc. Great combination of form and function, in my opinion.

    0
  101. 101
  102. 102

    Great article!!
    @timeforfit

    0
  103. 103

    cool colection

    0
  104. 104

    Redstage Magento

    September 22, 2009 10:19 am

    I can recall seeing some of these examples. None the less great show of creativity. Thanks!

    0
  105. 105

    I read this article and was inspired to create a background for my employer’s twitter page.
    http://twitter.com/lids4hats. Designed by @EllisGary

    0
  106. 106

    Thank you very much for the mention, really appreciate it!

    Sincerely,

    RJ Jacquez @rjacquez

    0
  107. 108

    Amy, anyone who views the web in a browser that’s scaled or setup in any unorthodox way has no right to complain about how pages then appear to them. *sigh*

    0
  108. 109

    Srinivas Tamada

    September 22, 2009 8:27 pm

    Wonderful Post

    0
  109. 110

    karl mariner

    a bit left of center…

    0
  110. 111

    Did i do mine right twitter.com@innerclick

    0
  111. 112

    I like Right mobile phone as its simple and effective and I like their colours :)

    0
  112. 113

    @innerclick Looks fine to me.

    0
  113. 114

    Check mine out! @DigitalSkraps

    0
  114. 115

    Cre8ive Commando

    September 23, 2009 2:18 pm

    Great post, there are some cool twitter background designs here. ;-)

    Some of them however don’t display properly on larger sized monitors. Check out this post to see how to create a twitter background the right way. Create a twitter background the right way

    0
  115. 116

    Great article! It helped me re-do my background. @joelmoney

    0
  116. 117

    Clayton Shumway

    September 24, 2009 2:47 pm

    Great article…the rising popularity of twitter will make your twitter backdrop just as important as the home page of your website. Check out the Twitter design package that Logoworks is offering – http://bit.ly/OZD3j

    0
  117. 118

    nice collections of twitter background.

    this page is a great example to show a twitter profile over different screen resoultions.

    -1
  118. 119

    Wow, that is so helpful! Thanks for a great article.

    0
  119. 120

    Catherine Hughes

    September 25, 2009 12:53 pm

    You did not mention Twitter and Beyond at twitterandbeyond.com, the company that handled our Titter background for us. We tried to create our own in Photoshop, which turned out to be a hilarious waste of effort. I am surprised more businesses don’t take advantage of this and use it like one would use a billboard on the side of the freeway. It’s another way to get your message out there. Some of these backgrounds are so cool!

    -1
  120. 121

    Could it be that I was the only one who thought about designing the following-tail? See http://twitter.com/ysfr for a proof of concept.

    0
  121. 122

    great list…very creative backgrounds…

    0
  122. 123

    @pausedesign
    my custom made background

    0
  123. 124

    Great list! I made my brand new background about a month ago:@m4rcosx

    What do you think about it?

    0
  124. 125

    Great article! The gallery is very inspiring. I’m working on mine now look for me on twitter joshhatcher

    0
  125. 126

    lol, how can you be an elitist snob with massive spelling/grammar errors :) loved the post though!

    @stellarjae

    0
  126. 127

    Well….I can say that it’s great to see people wanting to customize their Twitter pages and it allows for creativity. I would imagine that custom backgrounds are more preferred so that no one has a background that someone else might have but would probably be more for the business twitterite but for the individual personal pages, it’s not related to “branding”. Anyway, now I am thinking perhaps I should start the Twitter design process…albeit, to get creative.

    0
  127. 128

    Thank you all for your comments and sharing links to your profile pages. I have written a new article based on screen resolution issue that we face when designing a background for twitter profile page:

    Simple Feature That Will Really Make Twitter Designer Friendly – http://bit.ly/8pleW

    0
  128. 129

    I am pretty proud of mine @utahluxury

    0
  129. 130

    The pixel dimensions seem to have changed since this article was written because many of the examples above no longer appear streamlined. Many are a bit off now.

    0
  130. 131

    @adamplitt has worse background ever! I guess he never heard about TESTING

    0
  131. 132

    Dear twitter… please allow us to center the f##king background.

    Love, Tim.

    0
  132. 134

    The width is 763px not 765.

    0
  133. 135

    What about http://twitter.com/AnthonyNolan

    That is quite a nice background – and they are a charity rather than a personal/portfolio twitter so it is nice to see them doing something cool

    0
  134. 136

    Very interested by this post some weeks ago, I made a .png “template” to personalize my twitter background.
    If this can help you I share it with the world on my little blog here : http://bit.ly/1dAvpJ :)

    (it’s like other template but include the barre above and belove the time line for precise adjustment)

    0
  135. 137

    Curiously since the “lists” where active it seems to me that the wide-size had slightly changed (as Dan said “763-765”), so I updated my little template here http://bit.ly/29hp4X in .png (just drag and drop) or .psd (download).
    And tried also to make a better background than the precedent ^^

    0
  136. 138

    maxwellvintage

    December 12, 2009 9:58 pm

    I change my twitter page background often, (sometimes several times a week) because it is also partially a showcase of new items just listed or about to be listed on ebay or tia.com
    What always stays the same is the name and the picture of maxwell.
    maxwellvintage – sophistomax
    Happy Holidays

    0
  137. 139

    Guess it’s time to step up my Twitter BG game. Thanks for the post, great for ideas AND resources.

    ~Oh!

    0
  138. 140

    Any thoughts/comments/suggestions for mine? http://twitter.com/designerfoo

    0
  139. 141

    Great article. Good to know I’m doing something right… I’m pretty proud of mine… :D
    @BeauteMineral
    @KineticImages

    0
  140. 142

    wow… very useful sharing. love it! :)

    0
  141. 143

    Great article and some fantastic designs. I came across @ClarionIreland and thought is was a fantastically simple and clean layout.

    0
  142. 144

    Great article! I recently stumpled upon @duonz, which I thought was nice too.

    0
  143. 145

    Love them all could I submit our new one or has the ship sailed? http://twitter.com/searchdesigndev

    0
  144. 146
  145. 147
  146. 148

    Michael Murdoch

    March 10, 2010 1:33 am

    Great post.

    Would love to add ours http://twitter.com/thehouselondon to the list.

    Thanks!

    0
  147. 149

    Nice list!
    If you like you can see my twitter-background @ http://twitter.com/_morpher_
    Thanks,
    Daniel

    0
  148. 150

    Thank you for the techniques, nice list!
    You can see some other great Twitter backgrounds here: http://www.viuu.co.uk

    0
  149. 151

    veronica lailla

    April 29, 2010 6:02 am

    oi eu quero fazer um twitter

    0
  150. 152

    I love mine. Since i found them they´re my favorite.

    You can see mine here http://twitter.com/Curiosa

    0
  151. 153

    quero fazer um twiter me ajuda porfavor

    0
  152. 154

    I really like this one: http://twitter.com/langoor_au

    0
  153. 155

    helle pereira araujo

    July 27, 2010 12:37 pm

    amo o twitter

    0
  154. 156

    And what about this : http://twitter.com/TomBalev ?

    1
  155. 157

    no entendy nada sobre o twiteer de ser melo to lolcopois re re tefísel uno pouco.io acho que aquine em Londres ê mais fácil uno pouco.já esperrimentei o twiteer mais não sei meixer direito no máximo tem sô ene cerca te 100 pessolas.um bju….

    0
  156. 158

    The new Twitter redesign changes everything: the wider content area means people who had designs that worked before are now seeing their marketing messages chopped off… time to update your backgrounds everyone!
    http://www.usingmyhead.com/2010/09/28/twitters-new-design-cuts-out-marketing-messages-redesign-your-background-now/

    2
    • 159

      Update to what, though? On any res below like 1600px wide, there isn’t enough space to make anything truly effective. Not saying the new Twitter kills custom backgrounds, but it does almost ruin them on a lot of smaller screen sizes.

      0
  157. 160

    micaele martins

    October 4, 2010 10:59 am

    oi eu amo neymar demais gostaria de conhece-lo se vc neymar tive
    lendo isso anote meu email:micaele_neymar@hotmail.com,,,,bjss eu te amo!!!Boa sorte na sua carreira!!!

    0
  158. 161

    shariful kader

    October 28, 2010 10:07 am

    very very useful tips,i like it….

    0
  159. 162

    hello ,

    my new background theme with the new interface.

    let me know what you think !

    twitter.com/cattias

    1
  160. 163

    hello ,

    my new background theme with the new interface.

    let me know what you think !

    twitter.com/cattias

    0
  161. 164

    quero fazer um twitter

    0
  162. 165

    how make the sidebar semi transparent ?
    i only find scrit that make it disappear.

    0
    • 166

      Jorge Luis Jaral

      November 30, 2010 1:06 pm

      Hi David; the sidebar looks semi transparent on any non IE browser like Firefox, Safari, Chrome and Maxthon (my current favourite), hopefully IE9 will fix this… Naah! Move to a better browser buddy (and move your customers too) :¬)

      1
  163. 167

    quero ter um blog

    0
  164. 168

    eu me chamo pedro quem quizer se diverti no meu twiter esta convidado.

    0
  165. 169

    I think my background with purple paisleys should be in that list !
    Check it out http://twitter.com/#!/DesignByNur

    0
  166. 170

    quero hum Twitter

    1
  167. 171

    Nitesh Ahir

    May 13, 2011 11:01 pm

    @Saud Khan
    I was searching for best Twitter background on Google and land on this great blog post. I am PHP web developer & CEO of web development company so my friend advice me to create strong Twitter profile to create strong network in relevant technology. I have account with Twitter & update my status on daily basis. Now, I realize that: without good Twitter background my profile will not be strong. So I am going to design Twitter background for my Twitter profile. I forwarded this post to my web design team. Thanks to share & create very excellent blog post.

    0
  168. 172

    This is a pretty damn neat background from some video company it came 8th in Twitter competition ! http://twitter.com/WebVideoCompany nice… peace out Jay

    0
  169. 173

    Feel free to check mine out as well @GodwinNdlovu

    0
  170. 174

    I like mine, it’s tiled. @LoganKeown
    feel free to follow too!

    0
  171. 175

    A ver que les parece el mío @floresdeoaxaca

    0
  172. 176

    Did one for a client today @PiattoRest

    0
  173. 177

    We just updated our twitter background in that we modeled our logo in 3D in Monster Fur – it’s just something a little non-standard and a bit fun. @brandrally

    0
  174. 178

    Twitter recently added the New Header feature, you can now show your Contacts as well Ads in the Header Image. There is a nice tutorial i found, have a look at it here : /ow.ly/e1oUj

    0
  175. 179

    twitter is the powerful way for on line presence by updates suitable profile pic it will become more effective…

    0
  176. 180

    Saw your post & was inspired to change my background. If you guys are doing a new post please consider showing this: twitter.com/USAMail1

    Thanks.

    0

↑ Back to top