Scalable Full Body Backgrounds in Web Design

By Mike Takahashi It is reasonable to assume that most users have a display resolution higher than or equal 1024x768 pixels. As display resolutions continue to increase, there has been a steady trend of websites that have employed full body backgrounds using large images. However, many of these designs use images that have a set resolution for its width and height. Once the resolution is exceeded by users who have larger a display resolution, the design fails to scale properly. The following are two examples of websites viewed on a display resolution 2560x1440 pixels. Carfreaks

Jirnsum

There has been an emergence of websites that have been employing techniques to create scalable full body backgrounds. These designs have the advantage of being able to scale to any display resolution. When done correctly, they can create a seamless design for users regardless of their display resolution. We'll take a look at two different techniques that can be implemented. One is Flash-based and the other is CSS and JavaScript based.

Flash

Flash-based websites have continued to improve since its early days of adoption. Its support is now wide-spread across all browsers. However with the emergence of mobile phones such as the iPhone, compatibility can still be an issue. While still not the ideal solution for usability and accessibility, many of today's websites designed in Flash are slowly improving. Google has also greatly improved their ability to index Flash-based websites. HBO HBO is a 24/7 pay-television service that has been able to successfully integrate captivating images from its movies and shows into the design of their website. The use of large images helps complement the site and create a voice and identity for each of its movies and programs. Even though the website is Flash-based, most of the sections also contain unique URLs, which can be bookmarked.

Moviecity Pack Moviecity Pack is a Latin American pay television super premium channel. The website is similar to HBO and implements a heavy use of images within its design layout.

EwingCole EwingCole’s website is very content heavy with several layers within its design. The use of powerful imagery and overlays help create a unique look and feel for its company.

Werkstette Werkstette’s navigation structure is quick and almost too fast within its transitions. It creates a rushed atmosphere for the site, however its images are striking and beautiful.

Carlos Alonso Bodas Carlos Alonso Bodas uses his photography as the central focus for his portfolio of work. The dark design elements within the website give it a very technical look and feel.

Final Cut Final Cut is a cutting-edge creative editorial company, which services clients in the commercial, television, feature film and music video arenas. The site uses a grid-based layout of images to show its array of creative clients.

Maud Maud is a design studio based in Australia. The design layout uses images from its portfolio of work as the background of the design while overlaying accompanying text for its navigation and content.

Soren Rose Studio Soren Rose Studio integrates its portfolio of work within the design of the website. It uses a horizontal fixed navigation overlay that slides in and out to let its images deliver as much context as possible.

Pageboy A very simple and clean website that selectively uses images and white space to create a minimalist boutique feel.

Brook Pifer A simple design with left hand persistent navigation. The portfolio of images are shown in a photo book style layout.

Signal7 Signal7 creates unique 360 degree layout that pans left and right as you navigate to different areas of the site. The interactive feel of the design helps keep the user engaged and interested in what is going to happen next.

Gilly Hicks Gilly Hicks is a lifestyle brand from Abercrombie & Fitch that has an online presence selling its apparel. Its use of high quality images and tone fits the brands identity of a high end apparel company.

ZOEtee's ZOEtee's website incorporates a lot of white space into the design and layout. It makes use of Flash with transitions and navigation that change from one section to the next.

Nature Valley Nature Valley's design creates and very earthy tone. The design is fun and playful, yet it doesn't overwhelm the user with too many unnecessary elements.

rw/2 Studios rw/2 makes use of fully scalable images and unique overlays to create visually dynamic site. The photography section is a nice example of using scalable images within the design of a website.

Auberge de l'ill Just looking at the images that over take the entire page inspire you to make a reservation to this restaurant. The design and layout create an immediate sense of desire and intrigue. The navigation is styled so that its impact is as minimal and unobtrusive as possible.

Shinichi Sato Shinichi Sato's website looks very minimal at first glance. However, once you start to navigate around, you begin to see the intricate and refined details that accompany his photography.

CSS and JavaScript

CSS and JavaScript compared to Flash-based websites are much more user friendly in terms of usability and accessibility. By using a combination of CSS and JavaScript, websites can be made to look and behave very similar to Flash-based websites. Aedas The Aedas global network provides consultancy services in architecture, interior design, master planning, landscape, urban design and building consultancy in Asia, the Middle East, Europe and the Americas. Another website that looks Flash-based, but once you look into the source code you won't find any. The design and layout of this website incorporates several layers and multiple navigation points to create a design that complements its use of heavy imagery.

Solegiallo Solegiallo's use of clean vibrant images with circular design elements and rounded corners gives this website a very sophisticated aesthetic. The use of subtle tones in color help complement the images that are cycled through. The navigational elements are placed well within the scale of the design layout.

Radim Kurka Large type and the use of block elements give this website a very structured feel. The color themes used within the design also translate through to the images which incorporate similar color palettes.

Serial Cut Serial Cut's website is similar to Auberge de l'ill with one big exception. It doesn't use Flash. A good example of comparing two different sites that "appear" the same, but are completely different underneath.

Grodd Reklam Grodd Reklam uses only a single page for its website. The large type and color contrast bring immediate attention and focus to the content. The overlay allows the type to be readable, while still being able to give the image context within the design.

Noon Solar Noon Solar's site uses a unique navigation style. When hovering over its products, images are shown as a small preview when hovered over. Upon clicking a product, large images and white space are used to show the details of each product.

Mike Takahashi Photography On my own site I implement a minimal approach to design. The photographs are the central showcase. The use of opacity on the navigation elements and content areas allow the images to take more space and give it a fuller look.

dua dua's site uses a scalable horizontal layout. Instead of having images that scale on both the x and y axis, the horizontal layout allows the design to have images that are much smaller in resolution.

Resto Hull Resto Hull is an Italian restaurant that uses a similar layout to GOTOCHINA. The navigation is static and persistent through the entire layout of the website.

Hills & Dales Estate Hills & Dales Estate's website has a deep architectural feel to it with its use of warm colors and gradients. As the layout continues to scale up, the main body content is always centered.

Coba Hair Coba Hair is a hair salon that uses striking images of hair styles as the central theme of its website. The layout is a combination of text and content placed around the site in a block like fashion, which inhibits a very structured feel.

Virgin Racing Virgin Racing creates a very strong and defined look. The balance of dark and bold colors is complemented by the use of striking images and large fonts.

Firefly Photography This photography studio's website incorporates a cascading style layout. As you navigate further into the site, the levels transcend using overlays which open out into the central photography of the site.

Marina Yachting The use of full scale images helps to convey the lifestyle brand of Marina Yachting. The color palette used helps create a warm tone that doesn't obstruct the overall design.

Rebecca Barry Rebecca Barry's website uses images from her body of work which are used to set themes for each section.

Alexandra Owen Alexandra Owen's website uses a carousel effect for its collection of images that are fully scalable. The site is minimal and uses her collection as the main focus of attention.

About the Author

Mike Takahashi is the Web Strategies Manager for Communications & Public Outreach at UCLA (University of California, Los Angeles). He is passionate about every aspect of design and how technology can help influence our lives in meaningful ways. You can follow him on his blog at TAKA DESIGNS.