Vitaly Friedman May 11th, 2010

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

Screenshot

Jirnsum

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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

Screenshot

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

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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

Screenshot

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.

Screenshot

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.

50 comments

  1. Nice series and thanks for the links. The Flash based websites do my head in though! HBO even made my Mac Pro and Safari crash! Thanks HBO!

  2. A great post, I have no idea why people don’t do this more often. There is no excuse for badly cropped images!

    I wrote the code for Aedas over a year ago and used it again on fleurofengland.com. You can guess which is my favourite ; )

    1. A full screen scaling background does not mean the image isn’t cropped. Cropping images, badly or not, has nothing to do with scalable background images.

  3. I’ve seen a lot of these inspirational “lists” and too many times they’re retreads. This feels like a short spring rain — the kind that comes through while the sun is still shining.

  4. Full body background images are something I really love in a webpage design and hope to see increase in popularity in the future when appropriate.

  5. We’re also using a full body bg at http://rocketpack.fi/ . It was very easy to implement – first drop something like this just before the ending body tag:

    …and this in the css:

    #bg {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
    }

    …and voilà. :)

    1. I want to have the same effect for the background. The method that you’re using, are there any problems with the older browsers?

      1. El problema se presenta si el monitor tiene una resolución mas pequeña de la que tiene la imagen.

  6. The users who have a screen resolution greater than 1900 x 1200 is in the minority.

    However, if you want to cater to even more viewers, focus on screen resolutions of the MOST SOLD smart phones such as the iPhone and Android based phones.

  7. Thanks for share, but in our country, use very background image will make a site very slow and maybe couldn’t be opened.

    1. It depends how it was implemented. Bckg image can be a gif, so it wouldn’t be so heavy then…or you can use smaller image, and blur it on edges and fill the rest with plain color. There is many techniques to efficiently handle big bckg images.

      :)

  8. Still prefer Flash to do the Full Background website, ajax is an option but i felt it’s bit laggy…

  9. Great collection. I used a similar technique recently for http://www.amapolafilms.es/

    In our case, the background is a “img” with position: fixed and z-index: -1

    Initially, it’s a low-res small image, which is replaced for a bigger one when it’s loaded, or if the user resizes the browser.

  10. Very nice way to present websites!!!

    Because I’m a newbie, I just would like to know what is the way of doing it? Do you just need a large size picture as background or there is other things to do?

    Thanks for all!

  11. Considerably, the article is really the sweetest on this noteworthy topic. I harmonise with your conclusions and will thirstily look forward to your approaching updates. Just saying thanks will not just be sufficient, for the wonderful clarity in your writing. I will instantly grab your rss feed to stay informed of any updates.!

  12. This is one of my absolute favourite galleries. I find it so inspiring. I even used some of the css + jquery techniques on my website, bravadoweb.com.au
    Thanks heaps for putting this collection together. I have it safely bookmarked :)

  13. I like the helpful info you provide in your articles. I’ll bookmark your weblog and check again here regularly. I’m quite sure I’ll learn a lot of new stuff right here! Good luck for the next!

Leave a Reply

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