Line25

25 Web Designs with Full Page Background Photos

Read the full post

The use of full screen background images isn’t particularly new in the world of web design, but designers are continuously thinking up new and cool ways of implementing some kind of full size photo into the design of their sites. Sometimes the photo will set the scene and introduce the topic of the site, whereas other times an inspirational photo is used to set the mood and to draw the user in. This post rounds up 25 examples of great uses of full screen background photos in website designs across the web.

TM Design

View the website

Matchstic

View the website

Swiss Side

View the website

Paragraph

View the website

Meshable

View the website

7 Diamonds

View the website

Konsept

View the website

OwlConcept

View the website

TwoFold Creative

View the website

Mercedes House

View the website

Lula Designs

View the website

August

View the website

Revista VLOV

View the website

Papercutart

View the website

Eating in Sydney

View the website

Keystone Logistics

View the website

Alexarts

View the website

DesignlabCPH

View the website

Jessica Hische

View the website

Christian Woo

View the website

Finely Sliced

View the website

Carfreaks

View the website

Matthew Byrne

View the website

Outside the Wire

View the website

Givers

View the website

One Million Trees

View the website

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

  • http://www.musings.it Federica Sibella

    I love this collection: I think that if you have a great photo to work with it is worth to use it (wisely) as a background, because it gives the whole website a deep sense of reality

  • http://www.sozodesign.co.uk Mark Plunkett

    Great collection Chris thanks for sharing.

    My favourites have to be Alexarts and One Million Trees websites, whats yours?

  • http://damienfaivre.fr damienfaivre.fr

    I love this design ! Thanks for sharing Chris :)

  • Michael

    Nice collection!
    You may want to add http://www.spire.com in here.

  • http://www.dzinepress.com/ Dzinepress

    really professional designs with best examples of background photos. thanks for inspiration

  • http://www.nebulasdesign.com Nebulas Website Design Essex

    Some amazing examples.

    In the past this would never have been possible as the page would have taken so long to downoad with such a large image but thanks to the advances in CSS this is now possible and it works really well.

  • http://amisduchrist.org Moise

    Amaizing !
    Could I have some links of tutorials on how to do this?

  • http://boxadesign.co.uk Matt

    Room for a small one?

    http://danielhollandphotography.com

    Responsive too!

    • http://non-stop-disco.com Fraser

      I love how the stenciled out logomark works with your website and the full page background!

  • http://annporter.wordpress.com Ann Porter

    I love this collection.

  • http://9-miles.co.uk 9miles

    Great collection again.

    Alexarts has an interesting concept with the speech bubbles coming out of the different 'objects' in the city picture.

  • http://carmencardoza.blogspot.com Carmen Cardoza

    This is an inspiring collection, sparking great ideas.

    Thanks for the post :)

  • http://philreadman.co.uk/ Phil Readman

    Couple aren't full scale images, by that I mean if you view them on a 27" screen they dont fill the screen via css :)

    still all great sites though!!!

  • Ben Nesvig

    I just did this with my personal page: http://whois.bennesvig.com

    Love all the minimalism in the designs and photos. Definitely shows that less can have more of an impact.

  • http://spanishsahara.com AndrePliz
  • http://www.tahninial.com Dan Moat

    I guess it's because it has a wide fixed width, but 7 Diamonds could really do with being responsive. While I do have dual 24" monitors I don't always have the browser big and wide, meaning most of the photos loaded with half of a person. I like that I could scroll-wheel through them though.

  • http://www.buzz-webdesign.co.uk web design hull

    Great collection, my favourites are the Mercedes House and Matthew Byrne sites… thanks for sharing

  • http://www.ifg.pl IFG Design

    Carfreaks is quite old website and is mentioned in 'big background' sites collections :) love it!

  • http://www.velvetant.net/blog Antonea Nabors

    Nice one! Here is another one to add to the list.

    http://www.dixonbikes.com.au

  • http://www.crusherline.com mobile crusher

    Nice, but i have a problem , if you screen is very big, the background will distortion, isn't it?

  • Ken Adams

    There is a jQuery plugin to accomplish this:

    http://vegas.jaysalvat.com/

  • http://walkingmen.com Nicolas

    Very nice list – some amazing designs in there!

    We use the same idea on our site, with a nice sliding transition to move to the next background image:
    http://walkingmen.com

    We worked hard on this Flash-based version of the site to adapt nicely to many "reasonable" screen sizes, but the next version (under construction: html5, no more Flash) will be fully responsive of course!

    Thanks again for the inspiring selection.

  • http://www.my-html-codes.com HTML Codes Dude

    Great list but you may want to add this one from Red Bull. Awesome parallax scrolling effect as well as huge background image.
    http://www.artofflightmovie.com/

  • http://finelysliced.com.au Ray

    Thanks for featuring my site here Chris! Definitely worth mentioning the JQuery backstretch plugin, which makes this possible. http://srobbin.com/blog/jquery-plugins/jquery-backstretch/

  • http://www.jb-media.co.uk JB Web Design

    This collection is awesome. Absolutely love the Twofold website. Inspiring stuff

  • http://www.coal-crusher.org coal crusher

    Thanks for featuring my site here Chris! Definitely worth mentioning the JQuery backstretch plugin, which makes this possible.

  • http://www.lmmobilecrusher.com mobile crusher

    We worked hard on this Flash-based version of the site to adapt nicely to many "reasonable" screen sizes, but the next version (under construction: html5, no more Flash) will be fully responsive of course!

  • http://www.latrituradoras.es trituradora

    Great list but you may want to add this one from Red Bull. Awesome parallax scrolling effect as well as huge background

  • http://www.shimpactcrusher.com impact crusher

    We worked hard on this Flash-based version of the site to adapt nicely to many "reasonable" screen sizes

  • http://www.lmmobilecrusher.com crusher

    Nice, but i have a problem , if you screen is very big, the background will distortion, isn’t it?

  • http://www.chinahongji.com/product/Mobilecusher.html mobile crusher

    The background photos are nice,thanks for sharing it.

  • http://www.chinahongji.com/product/ImpactCrusher.html jaw crusher

    The ocean and sky is blue.

  • http://www.crusher,so ball mill

    The style is different

  • http://www.markupwiki.com Vijay Gupta

    Awesome collection…so beutiful and inspiring. Thanks for sharing :)

  • http://www.iconixmarketing.com Houston Web Designer

    I feel that full background images are very dramatic, and should be used to make a statement.

  • http://www.yocto-web-development.com Umer

    I was really looking for that.

  • http://advertisewebdirectory.com/ Timmy

    They may be great, yes, but I don't understand how they are making them fit all screen types and furthermore, full-sized background images must be a pain to load!

  • http://www.mailette.com adam

    some great examples, really love owl concept!