Textures and Patterns Design Showcase


Textures and patterns are used more often than one may think. The reason why we don’t see them is because they usually remain in the background, supporting the overall design, replacing a standard background color and creating a more inviting atmosphere. But they almost never stand out. Used primarily for background images, they need to fit to the overall design making the content easier to perceive. In fact, wood textures seem to have become so popular that designers suggest that wood is the new glossy style1 and wood is the new white2.

Well, we don’t think that wood is a new revolutionary trend — after all, it was used and explored for years. However, since wood isn’t used everywhere — in correct and wrong contexts — experimenting with it makes perfectly sense. Still, there are a number of options beyond wood: e.g. fabric patterns, tiles, ground, stone, walls, bricks, stiches, cardboard, ceramics, decay, rust, old tapes, illustrations, plastic and glass.

In this post we present a showcase of sites using textures and patterns— we want to focus designer’s attention on design options available beyond wood. Reason: we strongly believe that vibrant, realistic background images are becoming a new trend. If it sounds familiar to you, you are absolutely right: we’ve seen the same trend 8-10 years ago. The sources for the background images are usually either photos (e.g. you can download free textures in the Smashing Texture Library3) or illustrations created with Photoshop, Illustration etc.

You may want to take a look at the related articles:

Tiles, Patterns

How do I create a tile or a pattern?

Actually, that’s easier than one might think. For instance, you can use BgPatterns5, a free “tiled background designer” which is basically a pattern library where you can find, create, rate and share patterns. You can select one of 68 images (scrolls, stars, flowers, hearts, signs, trees etc.) as well as pick a color of your tile and the pattern will be generated automatically.


You can also apply some effects (dirty, rugged etc.) and rotate the pattern as you wish. The service has a nifty preview option which enables you to generate your background tiles on the fly, download them or store them.

Here is a compact overview of tiles which have been used on some sites presented below:


Showcase of tiles and patterns in modern web design

The Paisley Farmhouse8 uses nicely packaged retro wallpaper tiles as the background image.

Texture Background Screenshot9

Renegade Latino10 uses dark tiles for the background image. The content should probably be larger.

Textures and Patterns Design - Renegade Latino » Pa' Que Sepan El Poder Latino11

t!agOliveira12 uses a hardly recognizable, dark pattern as the background image. The image supports the content and fits to the overall site layout.

Textures and Patterns Design - t!agOliveira's | onePageFolio13

Uniquexports14 uses patterns and tiles for the background image for an online-shop. The pattern resembles a usual (not desktop) wallpaper. The design looks unusual yet attractive and definitely distinctive.

Textures and Patterns Design - Uniquexport15

Noblanco16 with a background patterns on the left side of the page. The layout is right-aligned for some reason.

Textures and Patterns Design17

General Robots18 uses stars tiles on both the left and the right side of the centered layout. It is also an online-shop.

Textures and Patterns Design - General Robots19

Booreiland20: any friends of blue, pink and yellow out there?

Textures and Patterns Design - Booreiland - platform for creative productions21

Warfield.net22 with a classic wallpaper patterns…

Texture Background Screenshot23

…and so does Designbyfront: the same theme, a different color.

Texture Background Screenshot

Falko Seidel24 with some tiles which one can find in old sweaters or on indoor walls.

Textures and Patterns Design - ::::: FSEID PORTFOLIO ::::: Falko Seidel :::::25

Latviešu Dziesmu svētki26 with traditional wallpaper tiles.

Textures and Patterns Design - Latviešu Dziesmu svētki27

Evernote28 has a corporate design with quite strange background patterns.

Textures and Patterns Design - Remember everything. | Evernote Corporation29

Anthony Clark30 uses a fading background pattern in the header of his portfolio.

Textures and Patterns Design - antclark.co.uk | Anthony Clark | Online Portfolio31

Rob Morris32 with a classic pattern used as the background image.

Textures and Patterns Design - Rob Morris33

Eden Organix34 is a wellness store with a classic wallpaper pattern.

Textures and Patterns Design - Welcome to Eden Organix - The Finest Organic Skin Care and Cosmetics Products35

MiniIcon36 keeps it to minimal; tiny content area is surrounded by background tiles.

Texture Background Screenshot37

Paul Burd38 uses the same concept.

Texture Background Screenshot39

Images and Textures


Outdoor Italia40 uses crumbly pieces of the ground as the background image. Other illustrations on the site fit to the background. The ants on the right hand side of the layout are pretty cool.

Textures and Patterns Design - Outdoor Italia official site - Abbigliamento e accessori per l'outdoor, escursionismo, campeggio, trekking41

Stone and walls

Soyrosa42 uses vibrant stone stripes as the background image.

Textures and Patterns Design - SOYROSA.nl / weblog43

Pikaboo.be44 with hard, strong and dark stone and an unusual vertical scrolling.

Texture Background Screenshot45

Elliot Jay Stocks46 uses stones as well and has even a tutorial which explains how to Create a textured background image47

Texture Background Screenshot48

Nolgraphic makes it differently: a photo of a wall is used.

Texture Background Screenshot

Corner Stone Americus49 is a church web-site with a grunge look.

Texture Background Screenshot50


uturn51 with bricks used as the background image. Here the background fits to the theme of the site which aims to “work togther to uplift street people”.

Textures and Patterns Design - uturn - working togther to uplift street people - homeless.org.za52

Hubltd.com53 with bricks painted in a white color.

Texture Background Screenshot54


Tennessee Education55 uses a vibrant background image with lines from primary school writing books.

Textures and Patterns Design - Education – Main56

Springtime in Tennessee57 is a section on the same site and uses the same approach.

Textures and Patterns Design - Springtime in Tennessee58

Dara’s Garden59 with beautiful flowers which make the background more lively and lovely.

Textures and Patterns Design - Dara’s Garden · Weddings, Receptions and Events in Knoxville, TN60

Dean Oakley61‘s design isn’t long but wide. Users need to scroll horizontally. The background image (illustration) always remains the same.

Textures and Patterns Design - Dean Oakley - I currently live on the Gold Coast, Australia62

DivVoted63 fills the whole page with a vibrant background image.

Textures and Patterns Design - DivVoted - vote for your favourite designs - another YoDiv site64

Stiches and Fabric

the brainwashfactory65 with stiches and fabric. Notice the sewed header at the top of the site.

Textures and Patterns Design - the brainwashfactory66

Design Sponge67 is dedicated to home and product design which explains why its background image is a fabric.

Texture Background Screenshot68

Scouting for Girls69 doesn’t only offer a “sewed” background image; it has a beautiful ladybug at the bottom as well.

Texture Background Screenshot70

Paper and Cardboard

Raufaser71 with an old paper pattern used as the background image.

Texture Background Screenshot72

A-Falange.net73 uses old-looking paper…

Texture Background Screenshot74

RedBull75 with a huge ragged cardboard. Flash in use.

Texture Background Screenshot76

The Brown Corporation77 uses a similar idea. The site name (Shitbox) is probably not the best title from the marketing perspective.

Texture Background Screenshot78


The Letter79 with a ceramics theme.

Texture Background Screenshot80

Decay, Dirt and Grunge

BrightCreative81: ornaments and patterns in use.

Texture Background Screenshot82

Decay of Intent83: the title of the site defines the layout of Alessandro Cammarota’s portfolio. Apparently, the background image stands for decay, the main theme of the site.

Textures and Patterns Design - Decay of Intent :: Alessandro Cammarota Portfolio84

Old movie-tape

0hara85 uses an old movie-tape for the background.

Texture Background Screenshot86


Riders network87: riders drive on the roads which is why this riders’ club uses rusty road as the background image.

Textures and Patterns Design - RIDERS NETWORK e.V. - The different lounge for your bike88

Life Style Sports89 has a rusty background image with asymmetric points spread across the background image.

Texture Background Screenshot90


ChamaDigital91 with a “wood”-theme. Clean and beautiful design.

Textures and Patterns Design - Home | ChamaDigital - Web Design Portfólio92

Kyle Haskins93 uses subtle “woody” background image which doesn’t stand out yet manages to support the content effectively. The design itself is clean and attractive.

Textures and Patterns Design - Kyle Haskins94

Robert Strickland95 uses wood as the background image; the colors in the design are chosen accordingly.

Textures and Patterns Design - happilycreate by Robert Strickland96

Slabovia.tv97 combine a unique retro-design with grid-based approach and with wood. The result is impressive.

Textures and Patterns Design - Slabovia.tv - Unimpressed With The West98

Highresolutiontextures99 with, well, high-resolution textures and the wood used as a background image.

Textures and Patterns Design - highresolutiontextures.com - the home of high quality textures and patterns100

Built by Buffalo101 with a high-quality wood background.

Texture Background Screenshot102

Oahu Hawaii real estate103 attempts to combine grunge with retro and wood. The result is definitely unusual, but in some sense quite appealing.

Textures and Patterns Design - Oahu Hawaii real estate - homes and condos in Honolulu Waikiki Kailua104

Rafael van der Vaart105: the site uses wood as the background image. Beware: on the site music automatically starts to play.

Textures and Patterns Design - Rafael van der Vaart official football website106

Does.ch107 uses wood, stiches, old paper and grunge together. Well, that’s an unusual combination.

Textures and Patterns Design - Does.ch108

WebRevolutionary109 with the black-white wood.

Texture Background Screenshot110

soulBlog111 uses a wood theme for a 4-column-based design layout. The color of links and headings fits to the theme.

Textures and Patterns Design - soulBlog112

Skitnice113 uses wood not as the background image for the layout, but only as the background for the main content area.

Textures and Patterns Design - Skitnice - bend za svadbe114

Paul Wallas115 with a light falling on the wood.

Texture Background Screenshot116

Perfect Order117 is a Japanese online store with a wooden background.

Texture Background Screenshot118

Bfrancesi.com119 with a dark sprayed “woody” background image.

Texture Background Screenshot120

Anthonyfairweather121 is a producer and designer and he seems to love black wood.

Texture Background Screenshot122

Brianwebb.org123: surprise, surprise! This design combines two popular background themes, wood in the header and tiles in the footer.

Texture Background Screenshot124

Sources and Resources


  1. 1 http://www.designmeltdown.com/chapters/GotWood/Part5.aspx
  2. 2 http://rubiqube.com/is-wood-the-new-white/
  3. 3 http://www.smashingmagazine.com/2008/05/27/smashing-texture-contest-results/
  4. 4 http://www.smashingmagazine.com/2007/01/02/where-can-i-find-textures-and-background-images/
  5. 5 http://bgpatterns.com/
  6. 6 http://bgpatterns.com/
  7. 7 http://www.smashingmagazine.com/images/texture-bgs/pattern.jpg
  8. 8 http://www.paisleyfarmhouse.com/
  9. 9 http://www.paisleyfarmhouse.com/
  10. 10 http://www.renegadelatino.com/
  11. 11 http://www.renegadelatino.com/
  12. 12 http://www.lastyear.com.br/tiago/
  13. 13 http://www.lastyear.com.br/tiago/
  14. 14 http://www.uniquexports.com/
  15. 15 http://www.uniquexports.com/
  16. 16 http://www.noblanco.com/web/
  17. 17 http://www.noblanco.com/web/
  18. 18 http://www.generalrobots.de/
  19. 19 http://www.generalrobots.de/
  20. 20 http://www.booreiland.nl/
  21. 21 http://www.booreiland.nl/
  22. 22 http://www.warfield.net
  23. 23 http://www.warfield.net
  24. 24 http://www.fseid.de/
  25. 25 http://www.fseid.de/
  26. 26 http://dziesmusvetki.lndb.lv/
  27. 27 http://dziesmusvetki.lndb.lv/
  28. 28 http://www.evernote.com/
  29. 29 http://www.evernote.com/
  30. 30 http://www.antclark.co.uk/
  31. 31 http://www.antclark.co.uk/
  32. 32 http://www.digitalmash.com/
  33. 33 http://www.digitalmash.com//
  34. 34 http://www.edenorganix.com/
  35. 35 http://www.edenorganix.com/
  36. 36 http://www.miniicon.com
  37. 37 http://www.miniicon.com
  38. 38 http://www.paulburddesign.com/
  39. 39 http://www.paulburddesign.com/
  40. 40 http://www.outdooritalia.it/
  41. 41 http://www.outdooritalia.it/
  42. 42 http://soyrosa.nl/blog/
  43. 43 http://soyrosa.nl/blog/
  44. 44 http://www.pikaboo.be/
  45. 45 http://www.pikaboo.be/
  46. 46 http://elliotjaystocks.com/blog/
  47. 47 http://elliotjaystocks.com/blog/archive/2008/tutorial-create-a-textured-background-image/
  48. 48 http://elliotjaystocks.com/blog/
  49. 49 http://cornerstoneamericus.com/
  50. 50 http://cornerstoneamericus.com/
  51. 51 http://www.homeless.org.za/
  52. 52 http://www.homeless.org.za/
  53. 53 http://www.hubltd.com/
  54. 54 http://www.hubltd.com/
  55. 55 http://edu.tnvacation.com/
  56. 56 http://edu.tnvacation.com/
  57. 57 http://spring.tnvacation.com/
  58. 58 http://spring.tnvacation.com/
  59. 59 http://darasgarden.com/
  60. 60 http://darasgarden.com/
  61. 61 http://deanoakley.com/
  62. 62 http://deanoakley.com/
  63. 63 http://www.divvoted.com/
  64. 64 http://www.divvoted.com/
  65. 65 http://www.brainwashfactory.org/
  66. 66 http://www.brainwashfactory.org/
  67. 67 http://www.designspongeonline.com/
  68. 68 http://www.designspongeonline.com/
  69. 69 http://www.scoutingforgirls.co.uk/
  70. 70 http://www.scoutingforgirls.co.uk/
  71. 71 http://loreleiwebdesign.com/
  72. 72 http://loreleiwebdesign.com/
  73. 73 http://www.a-falange.net/
  74. 74 http://www.a-falange.net/
  75. 75 http://www.redbull.com/flightlab/
  76. 76 http://www.redbull.com/flightlab/
  77. 77 http://www.thebrowncorporation.com/
  78. 78 http://www.thebrowncorporation.com/
  79. 79 http://theletter.co.uk/
  80. 80 http://theletter.co.uk/
  81. 81 http://www.brightcreative.com/
  82. 82 http://www.brightcreative.com/
  83. 83 http://www.decayofintent.com/
  84. 84 http://www.decayofintent.com/
  85. 85 http://www.0hara.com/
  86. 86 http://www.0hara.com/
  87. 87 http://www.riders-network.com/
  88. 88 http://www.riders-network.com/
  89. 89 http://www.lifestylesports.cz/
  90. 90 http://www.lifestylesports.cz/
  91. 91 http://www.chamadigital.com/
  92. 92 http://www.chamadigital.com/
  93. 93 http://www.kylehaskins.com/
  94. 94 http://www.kylehaskins.com/
  95. 95 http://www.happilycreate.com/
  96. 96 http://www.happilycreate.com/
  97. 97 http://www.slabovia.tv/
  98. 98 http://www.slabovia.tv/
  99. 99 http://www.highresolutiontextures.com/
  100. 100 http://www.highresolutiontextures.com/
  101. 101 http://www.builtbybuffalo.com/
  102. 102 http://www.builtbybuffalo.com/
  103. 103 http://lanikaiproperties.com/
  104. 104 http://lanikaiproperties.com/
  105. 105 http://www.vandervaartofficial.com/
  106. 106 http://www.vandervaartofficial.com/
  107. 107 http://www.does.ch/
  108. 108 http://www.does.ch/
  109. 109 http://webrevolutionary.com/
  110. 110 http://webrevolutionary.com/
  111. 111 http://www.soulcore.de/
  112. 112 http://www.soulcore.de/
  113. 113 http://www.skitnice.com/
  114. 114 http://www.skitnice.com/
  115. 115 http://www.paul-wallas.co.uk/
  116. 116 http://www.paul-wallas.co.uk/
  117. 117 http://www.perfectorder.jp/
  118. 118 http://www.perfectorder.jp/
  119. 119 http://bfrancesi.com/
  120. 120 http://bfrancesi.com/
  121. 121 http://anthony.morphlondon.com/
  122. 122 http://anthony.morphlondon.com/
  123. 123 http://www.brianwebb.org/
  124. 124 http://www.brianwebb.org/
  125. 125 http://bgpatterns.com/
  126. 126 http://www.jay-han.com/2008/02/19/27-websites-with-wood-design-inspiration/
  127. 127 http://www.creativecloseup.com/30-great-free-paper-backgrounds-and-textures
  128. 128 http://www.drweb.de/wordpress-themes/wordpress-theme-modernoak.shtml
  129. 129 http://www.drweb.de/wordpress-themes/images/modernoak-full.jpg
  130. 130 http://www.smashingmagazine.com/2008/05/27/smashing-texture-contest-results/
  131. 131 http://frozr.com/design/woody-free-wordpress-theme/
  132. 132 http://psdtuts.com/tutorials-effects/the-ultimate-wood-texture-tutorial/
  133. 133 http://elliotjaystocks.com/blog/archive/2008/tutorial-create-a-textured-background-image/
  134. 134 http://www.noupe.com/design/stunning-desings-using-that-piece-of-wood.html

↑ Back to top Tweet itShare on Facebook

Sven is the co-founder and former CEO of Smashing Magazine. He's now writing at his Conterest Blog, where he focuses on blogs, content strategy and publishing — all in German.

  1. 1

    René Drieënhuize with a classic pattern used as the background image.

    René is also a THIEF

    None of his site’s design is original

    those hands are a direct rip, among other things

  2. 52

    I hope the SM magazine editors are reading this;

    I don’t know if you’ve been informed directly but you are crediting someone for violating someones copyright. René Drieënhuize shamelessly stole and ripped off from http://www.digitalmash.com. Looks VERY bad on you guys for posting this! You probably want to rectify this ASAP!

  3. 103

    Vitaly Friedman & Sven Lennartz

    July 14, 2008 1:20 pm

    @Rach and other commenters: thanks, the link was replaced.

  4. 154

    Cheers guys.

  5. 205

    Agust Gudbjornsson

    July 15, 2008 11:24 am

    Very nice article, but there is always little but…

    There are of course allot more sites in this style range but I´m dissapointed in you guys for not showing my site here hehe ;o) Since I have all my branding materials, even business card made out of wood ;o)

  6. 256
  7. 307

    I love Renegade Latino’s site but shame its totally knacked in IE6 and not too hot in IE7, presumably because of the lack of png support.

  8. 358

    What amazing designs. I feel so inspired!

  9. 409

    Awesome collection!

  10. 460

    Wow there are some great sites on here

  11. 511

    SoulBlog should maybe create their own wooden background instead of stealing one that someone else has spent time creating!!

  12. 562

    Ed Lynn, you got right. But doesnt anyone know how to avoid this png and IE problem? I think they should not make such a shadows because of this situation.

  13. 613

    Thanks Smashing for including my site in this great list

  14. 664

    Hasan Tayyar BEŞİK

    November 20, 2008 9:12 am

    Really good collection.
    Usefull (if their bg.s are free to use), i don’t know the licences for all that sites.

  15. 715

    Hi. Good site.

  16. 766


  17. 817

    There are several really easy ways to get texture in Adobe Illustrator. If you go under “effect” towards the bottom of the drop down you will be given all kinds of options to edit your image.
    Have fun!

  18. 868

    Thanks smashing
    Amazing !!!!!!!!!!

  19. 919

    Great post, lot’s of texture examples :)

  20. 970

    Is blogengine better than wordpress in some manner? Really needs to be as it’s becoming more popluar as of late.

  21. 1021

↑ Back to top