Design

Scalable Full Body Backgrounds in Web Design

May 11th, 2010

By Mike Takahashi

It is reasonable to assume that most users have a display resolution higher than or equal 1024×768 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 2560×1440 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.

Tags: ,

50 comments for „Scalable Full Body Backgrounds in Web Design
  1. Rachel on May 11th, 2010 at 7:06 am

    Cool collection..I’m proud of it – simple&modern…

  2. Bram on May 11th, 2010 at 7:15 am

    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!

    • Sam on May 11th, 2010 at 7:54 am

      Time to throw out your Mac dude. Mac is for high school cheerleaders.

      • Tom Walters on May 11th, 2010 at 1:11 pm

        And obviously you have the intelligence of one.

      • Bram on May 12th, 2010 at 1:24 am

        Sure will do right away and run to the shops for a clone that runs on Windows 7.

      • Dan P on May 12th, 2010 at 11:09 am

        …troll?

        ..is… is that you?

      • Bill on June 28th, 2011 at 3:21 pm

        I’d rather be a cheerleader on a Mac than a dork on a PC.

    • Boots on May 11th, 2010 at 9:41 am

      Sounds like you have a problem with your Mac. It looks great on my PC.

      • Bill on June 28th, 2011 at 3:20 pm

        It looks fine on my Mac too. Could be Safari, could be a lot of things.

  3. Si on May 11th, 2010 at 7:38 am

    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 ; )

    • Emcee Hao on May 14th, 2010 at 11:57 am

      hey man, did you write a tutorial for that code? i’d love to learn, thanks!

    • Camille on February 26th, 2011 at 7:06 am

      Hmmm, you’re male?

      I have absolutely no idea…

    • Bill on June 28th, 2011 at 3:26 pm

      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.

  4. PierreJD on May 11th, 2010 at 8:03 am

    Maybe, this one too : http://www.patrikervell.com/

  5. Erik on May 11th, 2010 at 8:07 am

    Another good example of a scalable background is the very simple site of http://www.abens.se

  6. Ed on May 11th, 2010 at 8:18 am

    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.

  7. Eugene on May 11th, 2010 at 10:15 am

    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.

  8. Walter on May 11th, 2010 at 11:04 am

    Comprehensive and attractive collection! The sections regarding the underlying technology are helpful!

  9. Jiri on May 11th, 2010 at 12:43 pm

    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à. :)

    • Amair on May 12th, 2010 at 12:46 am

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

      • Reggy on May 17th, 2010 at 9:32 am

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

  10. esranull on May 11th, 2010 at 12:50 pm

    really good list thanks

  11. Jae Xavier on May 11th, 2010 at 1:39 pm

    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.

  12. Hitesh Mehta on May 11th, 2010 at 9:08 pm

    With these BG, the whole characteristic of a web page changes. Loved it.

  13. Eko Setiawan on May 11th, 2010 at 9:15 pm

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

    • Creative Mashup on May 12th, 2010 at 12:33 am

      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.

      :)

  14. Frato on May 11th, 2010 at 10:58 pm

    I would add http://www.rossohelmets.com/index.php?langue=fr for the html / css part

  15. Shine Raj on May 11th, 2010 at 11:30 pm

    Cool Sites.

  16. webdictator on May 11th, 2010 at 11:31 pm

    Great use of scaled backgrounds is this http://www.seventytwo.nl but it never got mentioned

  17. PapayaShake on May 12th, 2010 at 2:35 am

    Wow! Awesome collection, really inspiring… thanks for sharing

  18. Kaffebønner on May 12th, 2010 at 5:22 am

    Nice – I love the Carlos Alonso Bodas :-)

  19. Andrzej Mazur on May 12th, 2010 at 1:13 pm

    Most of them looks nice, but the Signal7 I like the most.

  20. ken shan on May 12th, 2010 at 6:57 pm

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

  21. andys on May 13th, 2010 at 6:26 pm

    any good tutorials, or resources on how to do this with css/javascript

    very good stuff here

  22. Facebook video indir on May 14th, 2010 at 10:30 pm

    With these BG, the whole characteristic of a web page changes. Loved it.

  23. M on May 17th, 2010 at 9:24 pm

    Another good example for the HTML+CSS part:
    http://mazatlaninteractivo.com.mx/sif/2010/

  24. Flash Toons on May 19th, 2010 at 9:11 am

    It’s just superb & inspirational collection.
    Thanks.

  25. Miss Burges on May 24th, 2010 at 11:23 am

    Amazing post! Madonna is the best, I totally worship her and want to become more like her.

  26. Jorge Bernal on May 25th, 2010 at 9:56 am

    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.

  27. Claude on June 25th, 2010 at 11:22 pm

    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!

  28. Willy Mayotte on October 7th, 2010 at 6:30 am

    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.!

  29. Branden Eroh on November 12th, 2010 at 12:47 pm

    this website is very good. i found it at google

  30. Rubin Stcharles on November 17th, 2010 at 12:30 am

    Hey man I think this is pretty decent. This web site is worth viewing all over again! : )!

  31. James on March 20th, 2011 at 2:14 pm

    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 :)

  32. Jared on March 26th, 2011 at 11:10 am

    any good tutorials css/javascript??

    Very nice information!

    Thanks

  33. arty on June 12th, 2011 at 10:34 am

    wow

  34. Sander on July 17th, 2011 at 6:29 pm

    To scale your entire website, see this tutorial.
    http://www.peecho.com/blog/scalable-websites-with-css3-and-javascript.html

  35. furgone usato on July 26th, 2011 at 12:55 am

    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!