Useful tips for creating full screen website backgrounds

We have already seen a lot of websites utilizing full screen background to draw visitors’ attention to the company’s branding effort. It looks pulsating and sensuous; many agencies and social networks have used this feature with great success. In this post we will discuss some useful tips for creating lively backgrounds using videos and images.

Images & Videos

We typically use either an image or a video in a full screen background. Images include photos, illustrations or a moving collage / slideshow. Videos are simple, but difficult to deploy due to uncertain browser support.

Regardless of what you use as your background component, it should be kept as an accessory rather than a necessity. For example, even if your background image or video is removed, you should be able to read your content properly and organize it accordingly. A good practice is to use a solid color in your background to make your text readable.

The home page for Snowball VFX uses a slideshow of large background images, providing more contrast for a single line of text. Another fine example of a large image background would be Invision’s website. In this particular example, it is a standalone image created using the Backstretch plugin. Static backgrounds are far easier to control because you have one stationary image to underlay the header content like navigation links and the company logo.

Note: Backstretch is a simple jQuery plugin that allows you to add dynamically-resized, slideshow-capable background images to any page or element.

In comparison, background videos are more fluid and unexpected when it comes to controlling colors. The homepage for the Nightcrawler website uses videos that shift between different scenes. Text is bright and generally visible in every scene. This is the objective while selecting videos for a website background. It would be really scary for developers to have to dynamically change text color as the video progresses, so instead it is better to utilize a color palette that complements the video.

Designing homepages

A brand typically uses large or full screen content on its home page, which is considered as the most useful place to include full screen content. Consider the example of Space Junk, because they are doing several things right. First, the site is fully responsive for mobile devices across platforms. Second, once the screen size dropped below a certain limit, the video changes into an image. This is pretty neat, as on a mobile device the background video may not be that useful and may take some time to load.

Use Contrast Wisely

Contrast is an attribute of visibility between a foreground and background. For example white text on a black page will have a very high contrast. This is precisely what we want to get, when working with full screen backgrounds.

It is a good practice to use a background color behind the main text so that it’s always readable. This way you can embed background videos and large images without worrying too much about the text’s readability. Moreover, you can set your top navigation links in a corner where it would be easily readable.

It would work wonders if you create a background video that loops between different parts. Placing crucial text in locations that will always be dark will help you use the contrasting effect in your design. If that’s not possible due to any reason, just give the text a solid color background. No matter how stunning your background photos are, it will not have any impact whatsoever if your text is not readable.

Wrap Up

You can use these tips for any kind of website. Full screen content has become common and is greatly supported among most web browsers. These tips are mostly fixated on usability, user experience and content priority. As long as the website is functional and the background adds value to the overall message, you are doing it right.