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.
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.
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.
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.
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.
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.