From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
It is sometimes the least noticed part of your website design. Other times it can be attention-grabbing. Mostly, though, the background sets the tone and provides context for the information on your site.
Backgrounds can come from a lot of things and are wide-ranging in scope. You can use images, patterns, solid colors or some combination of them all.
Today we are going to look at different types of backgrounds that are used well and explore why they work.
What Makes a Good Background?
There is no set rule for what type of background will work best for your website but there are some common factors.
- The content should have purpose.
- The background should fall in line with your brand.
- It should allow for placement of text that is easy to read. (This applies to color, contrast and size.)
- The background theme should be fairly consistent throughout the site. (You don’t want visitors to think they have stumbled on to another page when clicking through.)
- Backgrounds should download quickly and not cause the site to slow down or lag.
What’s Trending?
Just as clothes and hairstyles change, so do web design trends. This is especially true of backgrounds.
Right now, many sites are featuring large images on their opening page and above the scroll. While some images are sharp and easy to understand – think photos or illustrations, some are much harder to decipher. Large, blurry or faded images are appearing everywhere.
Solid backgrounds are also popular. But not with just your common black and white (a classic that never goes out of fashion), many designers are using bold, striking colors to help elements pop off the background.
Finally, patterns and texture are showing well. But the size of the shapes seems to have changed recently. There are more and more sites using a large pattern in the background, contrasting with the tiny patterns that were popular a while ago. Patterns, although large, feature low-contrast items for a rather subtle feel. Subtly textured backgrounds are also a very popular choice for giving a realistic feel to the design.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
Sharp Images
Using strong, sharp images never really goes out of style but what is trending is how they are used. More of these images are popping up as backgrounds, rather than as photos on another background. Opt for striking colors or great faces, much like the Rory McIlroy site.
Illustrations are also gaining popularity. Again, color is important as is the quality of the illustration.
Blurry or Faded Images
Using blurry or faded images can be rather tricky. It only works if you have a strong image to start with. (Using a poor quality image here will be messy.)
Blur or fade the image yourself with a distinct purpose in mind. Sometimes a dramatic fade, like the muted mountain used by Humaan, works beautifully while other times just a slight blur is enough (“We Make” sketchXchange).
Solid Color
Bright colors are in and they are attention-getting. Most designers are opting for simplicity when using color to create depth and contrast. (The lime green and black and white combo employed by mediumrare is exceptionally striking.)
White or Black
White and black backgrounds are classic and easy to use. You can create contrast for type (even small type) easily and will always be in fashion.
Make a white or black background look even more modern with a hint of dimension. Foundry Co. uses lines to create added emphasis while Designing Monsters uses a splash of color against the darkest hue.
Patterns and Textures
Don’t be afraid to go bold with patterned backgrounds. Big, repeating prints are all over the places these days. Subtle textures can add some realism to your design.
The key to this modern design is moderate contrast. Note the subtle difference in purples on the Alfred site and you have to look very closely (note the inset) to see the cross pattern.
Conclusion
The background can really set the tone for your website. Play with different options – photos, colors and patterns – before making a final decision. Don’t feel like you are limited to just one thing. Note from the gallery above that some of the most visually interesting sites have a background but also use a secondary backdrop as well, such as a photo on a solid color with text on top of both.
Think about your content when selecting a background theme and remember the most important rule of web design – make sure your site is readable.
Hi Carrie,
Thanks for the awesome round up! 🙂
Cheers.
Some really nice designs…. very inspiring. Too bad I suck in “design” 🙁
Interesting and good examples. Thanks!
Great collection!!
interesting nice Designs..!
Thanks!
Do you know any good techniques to put fullscreen backgrounds???
maybe a jquery puglin?? thanks
<a href="http://srobbin.com/jquery-plugins/backstretch/" backstretch js works well for this.
I think another trend that falls in line with larger, sharper images is in having the visuals reflect the product or service of the company in action. These pictures often depict people using the service, or feature strong visual cues that make the service or product relatable to the user’s understanding or experience of the world. It’s all about aiding the user’s visualization of how their life would be better, or easier, if they used the specific product or service.
Great article, thank you!
Cheers,
Sarah Bauer
Navigator Multimedia
Great collection Carrie…. Loved all of them…!!!
*The link of first example of Solid Colors (i.e.) tejpotter.com is broken…. its only http//. Please have a look….
great designs thank you
Awesome roundup. I especially love the blurry backgrounds. Can’t get enough of those.
Great selection! How about a background with some motion? http://www.aboutblank.cz
Great article, I love browsing through the creative ways backgrounds have been used to dress up pages. I love the moving background Martin! Interesting, but not too distracting.
These backgrounds are exceptionally awesome! Thanks for the round up.
it’s a lot inspirations here. thank’s
Thank you so much for featuring the work we did for our client http://www.kassandrabay.com!
Awesome work, spyros! Your gallery and the panel pop up along the bottom bit are all very cool touches.
I would like something like that.
Great examples, I think using nice photos is best these days with the wide range of resolutions, really gives an awesome effect.
great examples keep going and let us know about latest trends in web designing.
Thank you for showcasing the site Carrie – appreciated!
:]
Totally awesome article, I enjoyed it. I often use those styles especially pattern/texture. Keep up on writing great articles, thank you 🙂
Fabulous article, i have been searching to change my site background to a very modern look (www.Penandpaper.co.in) . Can someone suggest me options in mild colors.
Nice Collection!!!!!
It will really help me out making my clients website better.
Thanks a Lot!!!
Is it truth that when a website has a white background is slower than when using colors or images?
it’s not logical to me!
Nice collections, loved it!