BonFX

Typography & Graphic Design Blog

  • Facebook
  • RSS
  • Twitter
  • Blog
  • Books
    • The Preposterously Huge Book of Google Font Combinations
    • The Big Book of Font Combinations (Classic Fonts Edition)
  • About
  • Contact
  • Store
You are here: Home / Web Design / Best Practices for Full-Screen Website Backgrounds

Best Practices for Full-Screen Website Backgrounds

May 19, 2016 by Douglas Bonneville

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.

full-screen-background-bing

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.

full-screen-background-kanbanize

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.

full-screen-background-visit-humboldt

full-screen-background-visit-humboldt-mobile

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.

full-screen-background-playexplorers

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.

full-screen-background-davidia-interior

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.

Filed Under: Web Design

About Douglas Bonneville

Douglas has been a graphic designer since 1992, in addition to software developer and author. He is a member of Smashing Magazine's "Panel of Experts" and has contributed to over 100 articles. He is the author of "The Big Book of Font Combinations", loves cats, and plays guitar.

Drink from your favorite Font Mug

HOW TO MAKE INSPIRED FONT COMBINATIONS (without spending all day clicking things).


Font Combinations Book  

On Sale Now
Amazon / B&N

Or get the PDF eBook version, INSTANT ACCESS, 40% off Retail, now at the BonFX Store

Subscribe to the BonFX Newsletter

Keep tabs on the latest typography and design books and apps from BonFX. If you subscribe today, we'll also send you the classic "Typography Primer" from Adobe!

Recent Inspirations

  • The Preposterously Huge Book of Font Combinations January 13, 2021
  • Rainer Maria Rilke June 2, 2020
  • Three secrets to ignite inspiration April 22, 2020
  • How to “Draw Out” Your Creativity March 27, 2020
  • Finding Your Voice as an Artist: The Paradox of Originality February 18, 2020
  • Artist Frederick Franck on Seeing February 15, 2020
  • How to Move Beyond Creative Blocks February 10, 2020
  • Claude Bernard: The Only Way to Learn June 25, 2019
  • Negative Space: Saying A Lot With Nothing June 25, 2019
  • Shadowy Black and White Watercolors by Artist Elicia Edijanto June 18, 2019
  • Copland on What Creativity is Not June 18, 2019
  • Ornate Leaf Sculpture and Crochet Art by Susanna Bauer June 18, 2019
  • How to choose from among all your great ideas June 17, 2019
  • What you see is not always what you are looking at June 14, 2019
  • The Key to Unleashing Your Natural Creativity June 14, 2019

Copyright © 2021 · BonFX