Choose the best background for your website

Guest Blogger

If there’s one aspect of websites that’s too often neglected, it’s the background. Fortunately, it’s an easy thing to fix, and there are many more options than there used to be.

In this post, I’ll go over how to choose the best image, video, or color background for your website – and show some examples for inspiration.

Choosing the right image

The right image can have an immediate impact on your audience. It can set the right mood, and immediately communicate what your site is about or what you do. It’s also a chance to show off some of your assets—your location, your product, or even you!

A large background image will be the first impression your users have of your site, so choose it wisely. If you can’t decide on just one image, you could always run a slideshow instead.

creation

A large, beautiful background image can set the tone for your website: happy, serious, playful or serene. This example comes from Cuic Creation.

Sizing

It’s also important to choose an image with the right technical specs. I recommend using background images that are oriented horizontally instead of vertically, so that they fit most modern computer screens that are in the widescreen format.

The size of your image is just as important. Most computer screens support a minimum resolution of 1024 x 768 pixels, which means that your background photo should be that size – at the very least. Best is to aim for at least 1200 pixels wide. Uploading an image that is only 500px wide will result in a blurry or pixelated background, and nobody wants that.

Most photo-editing programs will be able to show you the pixel size of your image. You can also see the size right on your computer. If you’re on a PC, right click on the image file, choose “Properties” and then the “Summary” tab. On a Mac, right click on the image file, choose “Get Info,” and then click on “More Info.” That will show you the dimensions in pixels.

Finding images online

ksrf

The kitesurfing site isurfnl.com uses a large photograph in their background to set the scene.

If you don’t have any photos of your own that would work, there are great resources online for free, high-quality stock photographs that you can use legally without royalties. Some of our favorites are Pixabay, Fotolia, and UnSplash.

To tile or not to tile?

greg

Jeweler Greg Joaillier uses tasteful, subtle tiling on greg-joaillier.fr.

If you’re considering using a background image, I highly recommended that you do not tile it. We’ve all seen those websites that repeat a small photo over and over again in the background, and it can look busy and a little jarring. Instead, I recommend using one high-quality image set to full-width so that its splendor can come through.

fancy

Artwork website fancyfeatures.com tiles a brighter pattern in their background. Notice how they keep the number of other colors to a minimum so that they don’t visually compete with the blue and white dots.

A tiled background can be done nicely, though. It works best with subtle patterns, like a wallpaper. If you are considering this option, choose an image that can tile seamlessly and that won’t clash when set to repeat. Play around with different colors and patterns to find a repeating background that will complement your website rather strain the eyes of your visitors.

Video backgrounds

video_background

Finding the right video to use as a background can be tricky, but an image like this works great because of some subtle motion in the background.

As internet connections get faster, video backgrounds are becoming more and more popular around the web. A good video can work seamlessly with your site and add a subtle “wow” factor.

This is a feature you want to use with care, though, since some videos could be distracting or annoying. The effect works best with videos that are ambient and calm. For example, Airbnb’s new website uses videos of people having quiet moments at home, drinking coffee, waking up, etc. This helps evoke the right emotions for their users. Compare this to the video background on the Google Hangouts website. The quick cuts and the fast pace have a much different effect that could make it hard for viewers to actually focus on your content.

Try to choose a video that is not too long, and that perhaps one that has a seamless loop in the beginning and at the end. Sites like Pond5 offer stock royalty-free video clips covering a wide range of subjects.

Background colors

pierdas

You can’t go wrong with a white or grey background to show off your content or photos.

In the early days of the (slow) internet, most websites had a single color as their background to improve page loading times. As the internet became faster, the use of the photo background became more prevalent.

However, current trends in web design are bringing the concept of a single color back. The difference this time is that we’re no longer using the bright reds and blues of yesteryear. By using more subtle colors – even plain white – websites look cleaner and more elegant, and more attention is given to the content rather than to the design.

creat

Notice how mdcreation.com balances a bright background color with minimalist black, white, and grey text for a clean, modern look.

However, don’t be afraid to give bright and vibrant colors a try on your website. Different colors can make visitors feel different ways depending on how you use them. If you do decide to use a color, make sure that your text contrasts enough so that it’s readable (white or black text over a color background is usually a good bet). With a colorful background, it’s also a good idea to keep other colors to a minimum.

Keep in mind…

In closing, remember these quick and easy tips to find the best background for your website:

  • Choose images that are of high resolution (1024x768px minimum—if you have a bigger one, even better).
  • Make sure those images are in landscape mode, and not in portrait mode.
  • Only tile images that are meant to be tiled. Patterns are great for this, but not so much photos of your cat.
  • If you’re going for a video background, choose one that is subtle and without too much action going on lest you make your visitors motion sick.
  • For simple background colors, you can’t go wrong with white.

Stick to these tips, and your website will stand out from the rest.

This article was originally written for Jimdo by William Molina. With a simple, intuitive interface, Jimdo enables anyone to create a unique website with a blog and online store.

 

The author

Guest Blogger
Guest Blogger

99designs loves to share design how-to's directly from design professionals themselves. Reach out to share your thoughts, ask questions, or thank these experts for their awe-inspiring tips!

Related articles

The fundamentals of responsive website design

The fundamentals of responsive website design

The days of designing a website for a single desktop screen are well and truly over. Technology and the expansion of mobile websites are pushing web designers to re-think how their work is displayed across various devices. Think about it: how much browsing do you do every day on your phone vs. your desktop? Enter:…

The new Google Fonts is a win for designers

The new Google Fonts is a win for designers

Google launched Google Fonts in 2010 to provide web fonts free of charge. Over the next six years it grew considerably, becoming very popular with web designers—for the obvious reason of affordability. The original website was definitely what the startup world would call an MVP: minimal viable product. It got the job done, but it…

Current Design Contests

Designers, check out these contests so you can start building your career.