In the early days of the internet, websites were limited in their styling to simple text and the inclusion of basic images. As time moved on however, we saw the introduction of flash, javascript and more complex CSS stylings which helped to make websites stand out from each other .

As one design took off and people began recreating it, it became even more important to make sure your site stood out, creating something more eye catching and unique to make your website more memorable. Apart from restructuring your content and layout, one very popular method was the addition of background styling.

There are many creative ways people are approaching this, so here are my five favourite takes on the background property and its creative use.

 

1. Background Cover

This is a very simple technique of adding a full scale image to your site, and if done correctly, can really help to add impact. Originally this meant a static image would be loaded in at a set size, however as code techniques have been built upon over the years, you can now make the image resize and retain its proportions as the window changes size or upon the device viewport.

A good example on how to do this is by the king of CSS, Chris Coyier. (Be sure to read the update on how to target all devices.)

http://ringvemedia.com/

 

2. Background animation

The addition of new CSS techniques has meant it is now possible to use only CSS to create animated effects within the background of your site. One of them with a unique approach is the 3D cloud effects by Jaume Sánchez.

This simple animation moves subtly in the background whilst still adding with some ingenious cusor mapping. The only drawback would be the larger file size and the distraction of playing with the animation!

http://www.clicktorelease.com/code/css3dclouds/

 

3. Background Videos

As internet data speeds have gotten faster and faster, it is now easy to include a full size background video to run on your site. Originally included as compressed video files within your site, this is now being included as standard within external iframes and the HTML5 canvas.

Although generally limited to certain sites and presenting the issue of whether you should autoplay on page load or include audio, the idea is still a good one, especially if you have very limited content but still want to stand out from other sites. One of the best sites for its creative use of this technique has to be Eagleclean. Not only does it stand out, it also showcases the company’s role even further.

http://www.eagleclean.co.uk/

 

4.Parallax Background

Although introduced recently, the parallax website is now breaking into the mainstream web design world. Allowing your website to have elements moving at different speeds as you scroll through the page presents the user with a highly interactive experience and certainly one they will remember.

The drawback though can be large file sizes and jerky movements depending on data connection and that not all devices support it, however as this is used more and more, expect to see better compression methods and smoother transitions to be implemented. For now the example by Madwell has to be one of the best I have seen for its use of perspective and flow.

http://www.madwellnyc.com/

 

5.Multiple background images

The inclusion of multiple background images is a clever way to allow content to overlap in a creative way. As you resize the browser, you will be able to see the simplest sites come to life with movement, as well as allowing an extra sense of surprise for your viewers when they change their browser window on what first appears to be a static site.

The only drawback is that certain older browsers and some devices are unable to show multiple images in one layer, however with an appropriate fallback you will be able to create a similar appearance for those viewers. A great tutorial and showcase for this is by Prisca Schmarsow.

http://www.netmagazine.com/files/tutorials/demos/2011/11/get-to-grips-with-css3-multiple-background-images/demo/demo.html

 

 

So there you have it, five examples of how to use the background of your website in a creative way. The important thing to remember is, as good as some of these methods look, the main question when deciding on their use should be will it help create a better user experience for your viewers?

 

 

Posted in Blogs, Five on Friday, Website Design.

Leave a Reply

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