May 11 2010

Scalable Full Body Backgrounds in Web Design

Advertisement

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.

About the Author

Comments and Discussions
  • Rachel, 11 May 2010

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

  • Bram, 11 May 2010

    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, 11 May 2010

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

      • Tom Walters, 11 May 2010

        And obviously you have the intelligence of one.

      • Bram, 12 May 2010

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

      • Dan P, 12 May 2010

        …troll?

        ..is… is that you?

      • Bill, 28 June 2011

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

    • Boots, 11 May 2010

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

      • Bill, 28 June 2011

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

  • Si, 11 May 2010

    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, 14 May 2010

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

    • Camille, 26 February 2011

      Hmmm, you’re male?

      I have absolutely no idea…

    • Bill, 28 June 2011

      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.

  • PierreJD, 11 May 2010

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

  • Erik, 11 May 2010

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

  • Ed, 11 May 2010

    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.

  • Eugene, 11 May 2010

    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.

  • Walter, 11 May 2010

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

  • Jiri, 11 May 2010

    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, 12 May 2010

      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, 17 May 2010

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

  • esranull, 11 May 2010

    really good list thanks

  • Jae Xavier, 11 May 2010

    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.

  • Hitesh Mehta, 11 May 2010

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

  • Eko Setiawan, 11 May 2010

    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, 12 May 2010

      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.

      :)

  • Frato, 11 May 2010

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

  • Shine Raj, 11 May 2010

    Cool Sites.

  • webdictator, 11 May 2010

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

  • PapayaShake, 12 May 2010

    Wow! Awesome collection, really inspiring… thanks for sharing

  • Kaffebønner, 12 May 2010

    Nice – I love the Carlos Alonso Bodas :-)

  • Andrzej Mazur, 12 May 2010

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

  • ken shan, 12 May 2010

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

  • andys, 13 May 2010

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

    very good stuff here

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

  • M, 17 May 2010

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

  • Flash Toons, 19 May 2010

    It’s just superb & inspirational collection.
    Thanks.

  • Miss Burges, 24 May 2010

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

  • Jorge Bernal, 25 May 2010

    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.

  • Claude, 25 June 2010

    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!

  • Willy Mayotte, 07 October 2010

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

  • Branden Eroh, 12 November 2010

    this website is very good. i found it at google

  • Rubin Stcharles, 17 November 2010

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

  • James, 20 March 2011

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

  • Jared, 26 March 2011

    any good tutorials css/javascript??

    Very nice information!

    Thanks

  • arty, 12 June 2011

    wow

  • Sander, 17 July 2011

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

  • furgone usato, 26 July 2011

    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!

search form
 
image description image description