Home > Prototyping and wireframing > How to use an image as a website background: 4 best practices
Read our expert tips on designing picture-perfect website backgrounds that make users want to stick around

Read our expert tips on designing picture-perfect website backgrounds that make users want to stick around

The background of your website or app isn’t just nice to have – it’s an essential part of your site’s UX design.

According to The Next Web, your website background can be a powerful storytelling tool and help to reinforce your brand’s image, as well as create emotional impact for your users. And however you decide to design your website background – with a still image, illustration, video, or solid block color – there’s a lot to think about.

In today’s post, we’ll guide you through designing a website background with images, plus show you how to get started in a Justinmind prototype. To make sure your website or app is accessible as well as looking great, follow these four best practices for creating website backgrounds with images.

4 best practices for using images in your website background

Before we get into the dos and don’ts of website background design, let’s get you set up with Justinmind. Start by downloading your 30-day free trial here. Once you’ve installed the tool, Justinmind should open automatically.

Ok, let’s get prototyping!

1 – Choose the right image for your website background

First things first, you need high quality images (300 dpi). According to the Nielsen Norman Group, the majority of users decide if they want to stay on your website within the first 10-20 seconds of viewing. Your website background image will usually be the first UI element that loads on the page, therefore the first UI element your users see. So if you want users to see the value in your site when using a background image, you’ll need to use high quality visuals.

In fact, the bigger the better. The trick is to use the largest possible file without it slowing down your site. Being smart with your image’s file type will ensure it not only looks great but also that it doesn’t interfere with your site’s performance, or the user experience.

Images with lots of detail should be saved as JPEG. JPEG can display millions of colors and is compatible across platforms, browsers and image editors. According to HubSpot, JPEG is the best file type for ensuring high quality images at the lowest possible file size – perfect for optimizing your site’s page speed.

If you need to be able to scale your image to various sizes, SVG is your best friend. SVG (scalable vector graphics) allow you to change the size of your images without losing quality, great for designing a responsive website.

Prototype it with Justinmind: Justinmind allows you to work on images with a variety of file types, including SVG vectors.

Simply drag and drop your image to the canvas to scale your SVG images without losing image quality. To scale, drag the corners of the image as you would in any other design tool – or change the size in the Properties palette.


Create stunning image website backgrounds with your favorite prototyping tool

DOWNLOAD FREE


2 – Use UI color wisely in your website background

Picking your colors and their combinations is important as they contribute to how users will read your site, literally as well as figuratively.

Choosing a stunning website background image sounds great in theory, but not if your users can’t read the text placed on top of the image. Likewise, blindly choosing any old image will have an impact on the emotional charge of your whole site design.

Text needs to be readable and scannable and, when combined with the site background, set at an acceptable contrast ratio. To keep content readable and clearly visible, Wix recommends using sharp color contrast that accentuates text and call-to-action buttons rather than allowing them to get lost in the background.

Prototype it with Justinmind: Justinmind’s color picker lets you change the color of any UI element, as well as customize their opacity levels. Simply head to the Properties palette to do so.

website-background-justinmind-color-picker

In the Properties palette, you can also change the transparency of your background image in order to optimize your website background’s color balance. Additionally, consider adding a strong border around primary content to separate it from the background and bring it forward in the visual hierarchy.

And if you’re working with SVG images, don’t forget that you can change the color of your images as well as their size in Justinmind. Again, all it takes is a trip to the Properties palette.

3 – Consider the positioning of your site background image

When used correctly, large background images can help to communicate the purpose and vision of your brand. However, a full-screen background image can sometimes detract from other UI elements on the page. Striking the balance between a large, impressive image that engages users and one that distracts them from important content is essential.

Start by considering the different types of background image: background v hero headers. Hero images are pinned to the header section of a website and relate to the content that sits directly beneath. They help to deliver a message about a specific feature of your site.

In contrast, background images are not pinned to the page and are visible as the user scrolls. They are best suited to creating an overall theme or vibe for a site, rather than highlighting a particular aspect of the site.

Whichever you choose, your website background image should serve as a visual cue for your users, rather than take center stage. For more information on the different types of background images and how to position them on your website, check out this Smashing magazine post.

Prototype it with Justinmind: with Justinmind, you can control the functionality of your website background images in your prototype. With our new parallax prototyping feature, you can pin UI elements to the canvas so that they remain visible as the user scrolls.

website-background-justinmind-pin-parallax-feature

Additionally, if you’d like to add a hero image to top of your web prototype, you can actually contain it within the header. Simply click on the UI element you wish to contain your hero image and go to the Properties palette.

Under Background, click “Add image”, choose an image to serve as your hero image and click “Open”. Back in the Properties palette, choose “Cover” from the dropdown if you want the image to fill the UI element, or “Contain” if you want it to be contained within the UI element.

website-background-justinmind-scaling-feature

4 – Go responsive with your website background image

With users browsing sites from a multitude of devices, no web designer worth their Adobe XD license would dream of designing a website without experimenting with different screen sizes and different browser window widths.

So why should it be any different when it comes to your website background? Using an image that you hope will look equally good on small and large screens when scaled isn’t good enough anymore. Users expect your content to adapt perfectly to their devices – it’s 2018 after all.

In order to present your site to as many users as possible, you should be testing your site background out on mobile as well as desktop.

Prototype it with Justinmind: responsive design is nothing new to Justinmind. Our canvas, UI elements and interactions have all been built with different screen resolutions in mind so that you can create content that adapts to any and all devices. A recent upgrade made it even easier to scale content – check out our updates to the responsive features here.

website-background-justinmind-background-cover-feature

But what’s really exciting is what we announced in our latest release. Now you can actually test differently-sized screens within the same prototype for the perfect omnichannel user experience.

website-background-justinmind-omnichannel-ux

Simply create a new screen in the Screens palette and choose the type of device you want the screen to be built for. Then, drag and drop your background images into each screen and scale away! Simples.

We recommend starting with mobile as this will help you optimize your content around a smaller device, as well as your background image. And as always, start with the copy because content is king.

How to use an image as a background: conclusion

They say a picture is worth a thousand words. We say a picture is worth your entire website!

Stunning photographs and stylish graphics can complement your website, but only if used correctly. Web designers, if you want to make the most of your site’s background, it’s time to put our advice to use.

Download Justinmind now and start designing engaging, usable websites with beautiful image backgrounds in no time.download_free

Emily is Marketing Content Editor at Justinmind

Add comment

Your email address will not be published. Required fields are marked *

Download Free