Support Sign Up

Choose the Best Background for Your Website

Choose the best background for your website

 

A background image is the first impression a visitor has of your website and could be what keeps them browsing, or closing that window. The right image should grab your audience’s attention and keep them intrigued to find out more about your business or blog.

 

You might be wondering, how much is there really to it? So we challenge you to go through this list of possibilities for your background image and see what you can tick off.

 


Connect with your audience

 If you check video ad tech company Unruly’s top 20 shared ads for 2016, you will find one common factor—they all evoke emotion. Emotional branding is used in marketing to appeal to viewers, but this can also work for your website background.

 

Choose an image that is associated with your blog or business to make the visitor feel something positive or make an emotional connection with your brand. If you want to create a travel blog, use an image of a beautiful location you have traveled to and make the visitor want to join you there. An image that uses movement or with an interesting perspective can really make your background stand out.

 

This is a chance to show off your product, location, or yourself in the best light. If one image isn’t enough, you can choose up to 25 images in a running slideshow.

 

Beautiful background image
Example of a striking background image on a travel blog using the Shanghai Template

Find high-quality images online

Images in high resolution will make your website pop. You don’t have to be a professional photographer to get a beautiful background image for your website. There are plenty of resources out there with free high-quality stock photos.

 

If you want a photo of your own product as the background image and don’t want to hire a professional photographer then we have some great tips on how to take a professional photo using a DIY light box.

 

Every image whether it’s a photo or logo will have an ideal format, so if you’re not sure whether you should be using a JPG or PNG format for your image you can find out here.

 

Pro Tip: If your file size is too large then use a tool like TinyPNG or TinyJPG to lower the file size without compromising on the quality.

The perfect sizing

It is often an overlooked factor, but sizing will make all the difference in making your website look more professional. Try cropping any unnecessary background space in the image, so the emphasis is on your product, a person or that holiday destination you’re trying to show off.

 

Go for a landscape image rather than portrait, as these will work best for modern computer monitors. The minimum resolution on most computer screens is 1024x768 pixels, so we recommend a background image of around 2000 pixels wide as a good rule of thumb. Uploading an image that is lower than the minimum resolution will result in that 80’s style pixelated look.

High-quality background photo
A cropped, high-quality image of a person can be powerful in showing the humanity behind a scheme or organization and what they are trying to accomplish.

 Make sure to check your background on the main browsers such as Google Chrome, Firefox and on any mobile devices, so you can be sure your background works on all platforms.

Pro Tip: If you’re not sure of the pixel size, you can find this on a PC by right-clicking on the image file, choosing “Properties” and then the “Summary” tab. On a Mac, just right click on the image file, choose “Get Info,” and then click on “More Info.”

Set a Focal Point

A Focal Point is important to lead the viewer to the target you want them to focus on. This could be your product or an interesting feature in your image. The Focal Point helps to better align background images, so things that matter are not hiding behind the content area or the navigation.

 

Use our Style Editor to select the “Background” option, choose an image, then click on the “settings” icon to set a focus on which part of the image you would like to draw the visitor’s eye to. This can be used for any image, including slideshows and there’s no need for Photoshop or any extra tools.  

 

In one of our latest updates, we have now added a button to “pause” and “continue” your slideshow, so you can add a Focal Point on any image, preview it, then continue with your slideshow.

Focal Point in a website background
Use the Focal Point to emphasize a feature in the background image

Video backgrounds

 Video backgrounds look pretty impressive but it can be a balancing act between a breathtaking background and one that doesn't distract from your website. If you want to show your work in action, you can create a video with a subtle hue so that it isn’t too distracting from the rest of the website as shown on our Jimdo site. Alternatively, a more subtle motion in the background may work better for your business (as shown below).

 To add a video on your Jimdo website, you’ll need to choose a clip from either YouTube or Vimeo. You can grab some royalty-free video clips from sites like Pond5 or AllTheFreeStock.

 

We love the Stockholm or San Francisco templates to really show off the full effect of your video background. The Stockholm template has a large Header area which stays partially visible on your other pages so it won’t overpower your content.

Pro Tip: Try to keep your video short. Jimdo will automatically loop the video from the beginning so it won’t end.

Solid color backgrounds

If photography isn’t your thing, there are plenty of other options out there to use as your website background. Try using bold color blocks to make a fun and bubbly statement. Just be sure to check that the colors match your industry and the impression you want to create about your business.

 

unger music color background
unger music uses a bright, fun orange color to show off their playful side.

 

The background may also impact the visibility of your text so if you really want visitors to just focus on your content then a plain white background will work better. The white space gives your website a clean and more elegant look which will fit the image of a more traditional or serious business.

Pro Tip: Looking for something more rustic? Try experimenting with texture backgrounds like wood or textile to change it up.

Don’t overestimate the power of a striking background. Use your background imaginatively and  your visitor will go away with a positive impression of your business. So try out what works best for you and have fun experimenting with the different options!


Do you have an amazing website background you want to share with us? Let us know in the comments!

Tara Santiago

Content Editor


Like this article? You might also enjoy:

Your Favorite Posts of 2015
Your Favorite Posts of 2014
New Year's Resolutions for Your Website

Recent Posts: 

New and Improved Blog Features!
>> Read More

Small but Powerful—Notifications Are Here!
>> Read More

"Everyone Can Do PR!": 5 Steps to Your Own Social Media Strategy
>> Read More

Mobile Website Design Fails—And How to Avoid Them
>> Read More

Think Outside the Box! (Why You Shouldn't Read Articles Like This)
>> Read More


Write a comment

Comments: 8
  • #1

    Violin strings shop Laubach (Tuesday, 17 January 2017 18:35)

    Thanks a lot for this new feature, I will have to try it out at my own violin string shop.

  • #2

    Claus (Friday, 20 January 2017 09:34)

    Already tried it out. Thank you for your great designs.

  • #3

    Tara (Jimdo) (Friday, 20 January 2017 11:01)

    Hey @Violin strings shop Laubach That's great to hear! The website is looking really good, nice work!

    @Claus I love the image you've used for the Header in the Stockholm Template. Looks beautiful! Best of luck on your journey and I will be sure to keep an eye on the map to see the great places you're visiting.

  • #4

    app (Friday, 20 January 2017 11:02)

    Really appreciate for your amazing article. Keep going on, good stuff. Thank you for this valuable information.

  • #5

    Social2017 (Friday, 20 January 2017 16:21)

    this post is really likeable for me, thanks for bringing it in front of us

  • #6

    Roberto (Wednesday, 01 February 2017 22:53)

    Hello, how can I make the background video full screen, my Vimeo video shows black columns.
    Thanks.

  • #7

    Tara (Jimdo) (Thursday, 02 February 2017 08:29)

    Hey Roberto!

    The video format that vimeo uses will always have these black columns on the side. I would recommend uploading/using a video from Youtube instead. Then it should look perfect!

  • #8

    cjc0897@gmail.com (Friday, 10 February 2017 09:55)

    Awesome thanks for sharing a wonderful article