Tutorials

Website Backgrounds: 70+ Impressive Trends, How To’s & Best Practices

February 8th, 2009

Web designers compete to impress visitors with distinctive and appealing visual elements. Background images are one of those visual elements that when designed properly, can create an amazing atmosphere and convey the style the designer has chosen.

In this post you will see how web designers carefully created background images to achieve their goals in engaging and facilitating the design elements and content.

We have hand-picked different background image trends and tutorials you can use to create an amazing background images for your upcoming website design.

You might enjoy reading these posts:


How to Get the Following 14 Backgrounds?

1. Vigit Inspire Background

50 Impressive Website Header

How To » How To: Make the Viget Inspire Background

50 Impressive Website Header

How To » Create a Nature Inspired Painted Background in Photoshop

50 Impressive Website Header

2. Wefunction Background

50 Impressive Website Header

How To » Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it!

50 Impressive Website Header

3. SpoutCreative

50 Impressive Website Header

How To » Realistic Stone Texture

50 Impressive Website Header

4. Sony Bokeh Effect

50 Impressive Website Header

How To » Awesome digital bokeh effect in Photoshop

50 Impressive Website Header

5. Goodbytes light Effect

50 Impressive Website Header

How To » Abduzeedo Job Board banner in Fireworks

50 Impressive Website Header

How To » Crazy Cool Vectors in Illustrator and Photoshop

50 Impressive Website Header

6. Hereslifeafrica Torn Paper Background

50 Impressive Website Header

How To » Create a Realistic Torn Paper Effect in Photoshop

50 Impressive Website Header

7. Amuki Old Paper Background

50 Impressive Website Header

How To » Creating Old Paper With Custom Brushes

50 Impressive Website Header

8. Studio7designs Polar Lights Effect Background

50 Impressive Website Header

How To » Polar Lights Effect

50 Impressive Website Header

9. AdaptD Retro Rainbow Color Background

50 Impressive Website Header

How To » Mix Cool Retro Curves Into Your Photographs

50 Impressive Website Header

10. Okb’s Beams of light Background

50 Impressive Website Header

How To » Mix Cool Retro Curves Into Your Photographs

50 Impressive Website Header

How To » Create Intense Light Streaks

50 Impressive Website Header

11. Jared Campbell’s Vintage Background

50 Impressive Website Header

How To » Create a Wicked-Worn Vintage Pop Art Design

50 Impressive Website Header

12. Bart-Jan Verhoef’s Worn out Background

50 Impressive Website Header

How To » Make it Worn

50 Impressive Website Header

13. Boompa’s super colorul background

50 Impressive Website Header

How To » Painted Photo Manipulation

50 Impressive Website Header

14. Starbuckscoffeeathome’s Hand Written background

50 Impressive Website Header

How To » Pencil It In

50 Impressive Website Header

Creating your own Background

- Create a magical rainbow color flame in Photoshop

50 Impressive Website Header

“One of the things I’ve seen around quite a bit lately is a transparent rainbow gradient effect on a dark background. It seems to me that flashy transparent gradients are in these days. They make me think about magic. Today I’ll show you how you can create a magical rainbow color flame.”

- Simple organic shapes the Illustrator way

50 Impressive Website Header

- Creating geometric patterns in Illustrator

50 Impressive Website Header

- Large Website Backgrounds Do’s and Don’ts

50 Impressive Website Header

- How to: CSS Large Background

50 Impressive Website Header

- How to Create an Ice-cold Poster with 3D Text

50 Impressive Website Header

- How To Make An Awesome Grungy Paper Texture From Scratch

50 Impressive Website Header

- How a Simple Layout Can Be Mixed ‘n’ Matched with Patterns, Photos and Backgrounds

50 Impressive Website Header

- Trendy Geometric Lines

50 Impressive Website Header

Stunning Website Backgrounds

Instead of doing your own testing, below are some useful and time saving tools to help you play with web typography and make your own choices by giving you a real-time preview of many available CSS font properties.

- DeftCreative

50 Impressive Website Header

- GreenglobeIdeas

50 Impressive Website Header

- Friends of 42

50 Impressive Website Header

- Istokpavlovic

50 Impressive Website Header

- Matt Dempsey

50 Impressive Website Header

- DesignDisease

50 Impressive Website Header

- WorkAtPlay

50 Impressive Website Header

- Nine Lion Design

50 Impressive Website Header

- Mdxinteractive

50 Impressive Website Header

- Retinart

50 Impressive Website Header

- Nom Milk today

50 Impressive Website Header

- Prowseed

50 Impressive Website Header

- AgamiCreative

50 Impressive Website Header

- Tnvacation

50 Impressive Website Header

- Ronnypries

50 Impressive Website Header

- Digitalmash

50 Impressive Website Header

- BlkMtnStudio

50 Impressive Website Header

- StudioRacket

50 Impressive Website Header

- OakesDesign

50 Impressive Website Header

- OldLoft

50 Impressive Website Header

- ArtMetal

50 Impressive Website Header

- 45Royale

50 Impressive Website Header

- R0man

50 Impressive Website Header

- Drvo u mom dvoristu

50 Impressive Website Header

- Mindnever

50 Impressive Website Header

- OrganicSupermarket

50 Impressive Website Header

- HutchHouse

50 Impressive Website Header

- Dundeeliving 404 Page

50 Impressive Website Header

- Tohavit

50 Impressive Website Header

- Edit Studios

50 Impressive Website Header

- DawgHouseDesignStudio

50 Impressive Website Header

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Tags: , , ,

85 comments for „Website Backgrounds: 70+ Impressive Trends, How To’s & Best Practices
  1. matthew duerksen on February 8th, 2009 at 4:17 pm

    Great lineup! A lot of different things going on!

    Thank you!

  2. Antonio Lupetti on February 8th, 2009 at 4:32 pm

    Great list!

  3. Simon [webdemar] on February 8th, 2009 at 4:35 pm

    Thanks for the great list!

  4. Hercules on February 8th, 2009 at 4:37 pm

    Amazing and useful list, great work.

  5. Joffrey on February 8th, 2009 at 4:49 pm

    Wow, stunning!

  6. Gennice on February 8th, 2009 at 4:52 pm

    Excellent list! Thanks so much for sharing such a big and useful list of tuts. Needed this for redesign on my blog.

  7. joyoge designers' bookmark on February 8th, 2009 at 5:16 pm

    great list thanks..

  8. Vladimir on February 8th, 2009 at 5:18 pm

    Great list!

  9. demogar on February 8th, 2009 at 5:55 pm

    Great list, no doubt!

  10. Brayza on February 8th, 2009 at 7:30 pm

    Awesome article, but why is it that all the really cool backgrounds and colours etc are only used on “portfolio/blog” websites?

    • RubineBoy on February 10th, 2009 at 11:51 am

      Other businesses tend to chicken out on expressive or very special designs. They are afraid of pushing the edge I think.

  11. farah on February 8th, 2009 at 7:52 pm

    cool!! i really love this! thanks hey~ (^-^)v

  12. Brandon Cox on February 8th, 2009 at 8:05 pm

    Wow! What a post – impressive, and almost intimidating. Gotta get to work on some backgrounds now!

    • kdsjfkj on February 9th, 2009 at 9:52 pm

      kjdkfjdsf

  13. Kevin on February 8th, 2009 at 8:16 pm

    Great post with lots of sites I haven’t seen before -very inspirational.

  14. ravindra on February 8th, 2009 at 10:36 pm

    superb job thank for list. look here 5000+ Color Gradients Set For Photoshop .

  15. insicdesigns on February 8th, 2009 at 11:27 pm

    nice list!

  16. john on February 8th, 2009 at 11:57 pm

    I thank you for the help it is really a very good article
    Especially for beginners like me
    Thanks!

  17. Andris on February 9th, 2009 at 12:09 am

    good job. thanx for the great list.

  18. Andrea on February 9th, 2009 at 12:30 am

    This is great! Thanks for the inspiration!

  19. Aravind Jose T. on February 9th, 2009 at 12:40 am

    I could well understand the amount of work done behind this.

    You gone a step ahead and gave us some designs and then told us how to do that. Really Supreme.

    I like that touch !

  20. yugu - dzineblog.com on February 9th, 2009 at 12:40 am

    This is one Awesome list – three cheers

  21. poin47 on February 9th, 2009 at 1:22 am

    this is probably the best list of great tuts that I found for a long long time. great work!!

  22. Frog on February 9th, 2009 at 1:33 am

    Nice list thx

  23. Thomas on February 9th, 2009 at 2:25 am

    Great list Noura

  24. suresh on February 9th, 2009 at 2:56 am

    Excellent. Very nice collection.
    Thanks for sharing. forwarded to friends.

  25. Paul Anthony on February 9th, 2009 at 3:20 am

    As usual – a brilliant roundup Noura. Great stuff.

  26. Patternhead on February 9th, 2009 at 3:46 am

    Another great list, thanks for sharing.

  27. JohnONolan on February 9th, 2009 at 4:02 am

    Amazing post, bookmarked this one for definite future use!

  28. Manu on February 9th, 2009 at 4:46 am

    Great list

    Thank you

  29. DK on February 9th, 2009 at 5:52 am

    Wonderful Collection!
    Thanks
    DK

  30. Richard S Davies on February 9th, 2009 at 6:03 am

    Just amazing, thanks!

  31. Chris Spooner on February 9th, 2009 at 7:37 am

    Awesome post, great idea of combining real-world examples with online tutorials!

  32. Doug Avery on February 9th, 2009 at 8:25 am

    We at Viget also wrote our own tutorial on making the backgound. You can read it here. Design Reviver did a great job with their tutorial, too, I’d recommend reading both.

    • Noupe on February 9th, 2009 at 10:30 am

      I am not sure how i missed this one, i have came across it before and found it very useful.
      Just added it to the post now.
      Thanks Doug :)

  33. Aditya on February 9th, 2009 at 8:43 am

    Thanks a lot :)

  34. dp on February 9th, 2009 at 9:34 am

    Wow, great list!

  35. Jeromy on February 9th, 2009 at 9:42 am

    One Word Noupe…..

    WOW!!!!

    As always a list not likely to be beat!

    Regards,

    Jeromy

  36. Jasper on February 9th, 2009 at 9:49 am

    Thanks, great list!
    I’m definitely going to try some of these tutorials!

  37. Nikhil Shahane on February 9th, 2009 at 12:47 pm

    Epic post.. very very helpful. Thanks!

  38. Eric Shafer on February 9th, 2009 at 1:20 pm
  39. CPG on February 9th, 2009 at 1:46 pm

    Photoshop Open ! Go…

  40. Drake on February 9th, 2009 at 2:03 pm

    Awesome post, I wish someone would write a how to on the background for 365 Days of Astronomy. Anyone know where I could find one?

  41. Mike Johnson on February 9th, 2009 at 2:26 pm

    Awesome list! I’ve already checked out a few of the tutorials.

  42. conrado on February 9th, 2009 at 3:46 pm

    Thank you!

  43. Whizkid on February 9th, 2009 at 4:04 pm

    Awesome !!!
    I m lovin it.

  44. Ben Higham on February 9th, 2009 at 4:24 pm

    Amazing list. Some very inspiring work in there.

  45. myows on February 9th, 2009 at 4:50 pm

    beautiful list – thanks for sharing,
    very inspiring indeed !

  46. zaiah on February 9th, 2009 at 7:17 pm

    AWESOME!!! This is exactly what the doctor ordered. So many sites have wonderful examples of creative, innovative and modern work. But few of them show you have to create your own!!! Thanks and please keep them coming!

  47. Abrishca Digital Media on February 9th, 2009 at 8:22 pm

    What a massive list! Might take a while to get through, but plenty of inspiration to be gained. Thanks.

  48. Gis on February 9th, 2009 at 8:24 pm

    WooaOAooOAaa!! Crazy amount of inspiration!!
    Thaaank you :D

  49. aravind on February 9th, 2009 at 9:31 pm

    Amazing post. :)

  50. Jesse Korzan on February 9th, 2009 at 10:33 pm

    Thanks from me and the crew at Work at Play for including our site on this great list.

  51. Stacy Allen Hummel on February 9th, 2009 at 11:15 pm

    Wow, I am honored to even be mentioned alongside some of these amazing designs. Great list and great post. Thanks!

  52. not2comply on February 9th, 2009 at 11:32 pm

    Cool..

    thanx for the list…..

    Keep up the good works.

  53. Timothy on February 10th, 2009 at 10:30 am

    Really good post. Thanks

  54. mr. tunes on February 11th, 2009 at 11:14 am

    quality publishing right here! thank you

  55. eddie on February 12th, 2009 at 7:54 am

    I am always trying to make a awesome background as a site’s header
    thank you for this post~

  56. GoodBytes.be on February 13th, 2009 at 12:50 pm

    Great list! And many thanks for including us as well, we really appreciate it.

    GoodBytes

  57. Multidesign on February 14th, 2009 at 8:01 pm

    Impressive!

  58. evan on February 16th, 2009 at 12:04 am

    wow! stunning! hehe its so big it made my fancy computer lag! haha

    good work :)

  59. saurabh shah on February 19th, 2009 at 6:57 am

    nice quality post … thnks for sharing

  60. Amber Weinberg on February 20th, 2009 at 10:43 am

    Awesome resources!

  61. blogsarticle on February 20th, 2009 at 5:20 pm

    Impressive!

  62. Ralph on February 21st, 2009 at 12:10 pm

    There are many great Websides. Thank you for your hard work to colect this many websides. Ralph

  63. Miles Tinsley on February 22nd, 2009 at 6:26 am

    Wow. This is such a rich resource that gives an interesting snapshot of current web desgin trends. Inspiring stuff…

  64. sean steezy on March 3rd, 2009 at 2:22 pm

    thank you. this is such a great site, glad i found it and RSS’d this stuff. thanks!

  65. Ganesh on March 4th, 2009 at 7:16 am

    Superb, designs !! Thank you NOUPE !

  66. Jamie Allsop on March 30th, 2009 at 1:37 am

    These are some really great examples of creative design here. I do really like Digitalmash, it has a simple layout and the part I like about it the most is the images in the middle, it is just different to what you normally see. I mean they are all great but that one just stuck out from the rest of them. This is a really useful resource for inspiration.

  67. Business on October 31st, 2009 at 2:50 am

    I see a lot of sites where the text will be a light gray and the background is white – err! That’s very annoying and hard to read.

  68. Devin Walker on December 3rd, 2009 at 11:56 am

    Great list, I love transparency in web design.

  69. Alan T on December 8th, 2009 at 10:06 am

    Great list – my site is so dull in comparison it’s very depressing

  70. yashodhan deshmukh on May 26th, 2010 at 11:16 pm

    its gud I like it as all the about guies

  71. Harold Johnson on July 14th, 2010 at 6:08 am

    Great point, terrific website. Listen, did you guys read about Blizz looking to use Real ID on the online community? It seems they recognized that that is no way to win at wow, as they reversed their decision. Now we can all go back to playing wow without having to worry about compromised privacy. And they can go back to working on Starcraft. BooYAH!

  72. Merrill Wilt on November 7th, 2010 at 5:13 pm

    Will be blogengine superior to wp for some reason? Needs to be as it would be starting to be popluar of late.

  73. Media Chandler on January 13th, 2011 at 7:42 am

    Thanks good looking stuff..

  74. dp on October 17th, 2011 at 6:43 pm

    Let me first start by saying I am def no expert! Every time I try and create a background like the above Tnvacation the background moves around when I change my screen resolution. For instance in the Tnvacation (if I create that) and I changed the screen resolution lower the background image would shrink towards the center of the screen. So you wouldn’t be able to see the phone, guy singing or the stuff at the top. It would be behind the DIV page. How does on correct that issue?

    Thanks

    • dp on October 17th, 2011 at 7:00 pm

      Well I figured out its just my body div getting larger and cover up more of my background. How do I stop that from happening?

  75. Zaib Khan on December 12th, 2011 at 2:29 pm

    wow i really like all the collection. Thanks for sharing

  76. Dreamcatcher Studio on December 26th, 2011 at 11:59 pm

    i love the how to section, great idea

  77. Kuda on April 11th, 2012 at 7:55 pm

    I must admit, I always vie drought liked the retro theme, actually … papyrus parchment. But all of these variations is extremely effective and beautiful.

  78. Izrada sajta on April 11th, 2012 at 7:57 pm

    Very impressive themes that are used in a very creative use of sites. The freedom of art is here to reveal the full effect. Thank you!

  79. Jonathan Scialpi on July 9th, 2012 at 4:13 pm

    Cool Ideas. I’m in dire need of a new background for a site.

  80. Aleksandar on September 26th, 2012 at 2:15 pm

    Istok Pavlovic has great design. Breat look for the blog.

  81. ibnu on March 19th, 2013 at 4:15 am

    I think these backgrounds too complicated, Is there any simple background but looks professional?