You’ve probably noticed the trend for bigger, bolder visual elements on websites. There are several reasons for this trend, and one of the biggest is that visual elements catch the attention of the reader. A picture really is worth a thousand words, and it grabs the reader above the fold. That means you have them, at least for the moment, and can then keep them engaged with your amazing content.
One way to incorporate large images is with full-screen website backgrounds. However, a full-screen background can be done really well, and it can also be done really wrong. The last thing you want is to make your website cluttered or the text difficult to read. To make sure you’re using a full-screen background in a way that will entice readers to hang around your site, try these best practices:
1. Prioritize
When it comes to using larger images in the background or anywhere on the page, you have to stop and consider what you want your priority to be on the page. Compelling images can be engaging and inspiring to your audience. However, those same images can also fall flat if placed incorrectly on the page. To make sure your photos are not distracting and are placed correctly:
- Try to step back and view your site as though you’re seeing it for the first time.
- Eliminate color schemes that clash.
- If you are placing a headline over the image, make sure you place it somewhere with space and don’t cover important parts of the image.
- Conduct A/B testing to ensure you aren’t turning off visitors by making your website too busy.
One example of a full-page background done well is Bing. Their background photo changes, but it fills the screen. They keep the rest of the page simple to avoid clutter. The search box is easily spotted and near the top of the fold, and there are additional images on a simple and transparent black bar that take you to different areas. If you plan to use a bold image, keep the other elements simple.
2. Unify Your Color Scheme
There are a number of ways you can unify your color scheme. One of your first steps should be to make sure you are using colors within the same palette. You can upload your background image to a tool like Pictaculous to get color scheme recommendations based on the image.
You’ll also want to make sure your text coordinates with your colors and is easy to read. Some tips for making your text pop even on a full-screen background include:
- Fading the background to make it more unified and subtle.
- Overlaying a solid color for text so the text pops instead of being difficult to read against a background.
- Putting the text over a gradient to a solid color.
Kanbanize does an excellent job of unifying their full-screen background with the rest of the site, by overlaying the whole image with a navy blue and adding a vignette.
3. Make Mobile Responsive
As of 2014, the number of browsers accessing the Internet via a mobile device versus a desktop has reached a “tipping point.” There are now more mobile users than desktop users. That means it is important that your site works for different screen sizes. This can be an issue with a full-screen background that is created for a specific size screen. Some things you can do include:
- Testing your site in different types of window sizes. One tool for this is BrowserStack, but there are many others available.
- Hiring a programmer or coding yourself to ensure your site adapts correctly for mobile browsers.
- Using a WordPress theme that is already mobile responsive and tweaking it to suit your own tastes and design needs.
Visit Humboldt does a good job with this type of design and making it mobile friendly. The website looks just as good on a tiny screen as on a larger one.
4. Be Smart About CTA Placement
More than likely, you’ve created a landing page because you want to convert site visitors either into customers or to get them to sign up for a mailing list, etc. However, a full-screen background can sometimes detract from other elements on the page as it will draw the visitor’s eye. This makes it extremely important to place your call to action in a smart place that will entice the reader to click. Here are a few things to consider:
- When you look at the image and text, where is your eye naturally drawn? Most Westerners, for example, read left to right and top to bottom.
- Does the CTA stand out? Is it bold enough to show up against the background?
- The CTA should be one of the few elements on the page. If you limit the choices of where a site visitor can click, they are more likely to click on your CTA.
PlayExplorers does a good job of using video as their full-screen background and then placing the CTAs in buttons at the bottom of the video in bright orange, drawing the visitor’s eye.
5. Start with a Great Image
Since the image is going to fill the user’s screen, you want to start with large, high-quality images. You can always scale them down, but get that image in the largest resolution you possibly can to start. While it’s true you’ll need to compress it to get it to load quickly for browsers, you are much better off starting higher than you need and scaling down than the reverse. Trying to do the opposite will result in a distractingly fuzzy image. Here’s what you can do to get your background image how you want it:
- Get the image in highest resolution available.
- Make sure the image fills the screen proportionately or can be cropped to fit and still look great.
- Wix recommends using images 1250×800 pixels or higher for full-screen background images.
Davidia Interior does a good job of using a high-quality, full-screen background image that pops and has excellent clarity.
Use Common Sense Creating Full-Screen Website Backgrounds
As with most things in web design, common sense comes into play. If you can’t read the text on the background, then you need to offset it in some way. If you don’t notice the CTA, then the site visitor probably won’t notice it, either. A full-screen background makes your site look modern and on-trend, but it only works if it works well for you and your site visitors.
