Web Design: Photographic BackgroundListThumbs

Web Design: Photographic Background

August 07, 2008

If I were told to make a list of web design trends I love, there would be really few itens. Wood, glowing stuff and other things... and most definately, photographic backgrounds!

I even had a personal project back a few years agora, but it never went online. Here are a few websites that we get to see this awesome trend... most of them are flash sites, because when you have a photo background, it's important that it will respond to your resolution... otherwise, if you have a 1280x1024 back photo, it will lose a lot of information in 1024x768.

Do you guys know any other cool sites like these? Or even cool tutorials on how to do it? If so, leave a comment! Enjoy! ;)





Explore the thumbnails to enter the photoback.



















Just choose a language and it will pop up.

About the author

Hello, everyone! I'm Paulo Gabriel, a 25 years old designer from Porto Alegre, Brazil. I work as a webdesigner since 2006, but websites and blogs have been a hobbie for me since 1999. Here in Abduzeedo, I try to bring only the hot stuff for you... and hope that all of you enjoy my posts! For more cool stuff, you may also follow me on Twitter.

Sponsored Links:

More content from:

Help us to share this!

20 Comments

Camilo Oliveira08/07/2008

Here´s another site with great use of photographic background
http://www.phillipsdepury.com/

David08/07/2008

These sites are amazing. Does anyone know where you can find a tutorial on how to build a site such as these?

Jennifer08/07/2008

Great post. I love photographic backgrounds too. Here's a couple more - these are all photography sites so in a way they are backgrounds as well as main content;

http://www.letstakepictures.info/index.php

http://www.cake-factory.com/#/home/

http://www.brook-pifer.com/

neil08/07/2008

really good links thanks, its a shame there arent more websites like this that arent using flash. id like to see how theyd turn out

sphereboy08/07/2008

Ruby Tuesday's uses this new trend.
Looks great, and i love their "loader" for the background image too.

http://www.rubytuesday.com/agreenruby/

I would love some how-to's also regarding this technique.

zhennino08/07/2008

here's my website with photo-bg i hope u'll enjoy it! :D

http://www.luckyday.it

pickupjojo08/08/2008

Amazing list! The hardest in this art is to do it in XHTML/CSS: it's easier in Flash because it fits to your screen, but in usual ways...

cykma08/08/2008

i've done a site a year ago or so with a photographic background: www.neliamusic.de/site
cheers!

fcuk08/08/2008

Hi!

One of my fav trends. I don't know tuts, but there are only a few specialities for this style. At publishing set the flash content to 100% width/height, set the Stage.align to "TL" (for example - to align the origo at top-left), set the background photo's width to Stage.width, and to constrain proportions set the other dimension to the resized dimensions _x/yscale. Done:) If needed, i'll add a "site" template to Flashden.

My latest site (at the company i work) based on this style was Retro jeans, visit it at http://www.retrojeans.com

theq08/08/2008

Nie bg photo makes sites looks hot and its pretty easy way to make them look nice)

Busby SEO Challenge08/08/2008

Very Nice! Very Creative Websites.. I think it will take month's to finish one of those..

Francisco08/08/2008

I also love this trend. great selections in your post!
i know that the H&M website also does this: www.hm.com

Anonymous08/08/2008

Both thenorthface.com and jansport.com have recently relauched with photographic background sites. The scaling technique for different resolutions and even browser window resizing is really nice.

Thomas 08/09/2008

Nice post! I like the concept of using a large background image very much! Although I'm not a flash supporter... With a css based site it's a bit more difficult but with the help of some javascript a lot can be done!

Raph08/12/2008

Here's how to do this in CSS if anyone's interested.

http://css-tricks.com/how-to-resizeable-background-image/

51255designs08/14/2008

These are great selections. I particularly like Signal 7.

Anonymous08/15/2008

great work. congratulations. best: #3 (the blue)...pure inspiration.

Min Thu08/17/2008

Very good collection, thanks!

armagan09/04/2008

another good usage of fullscreen web site;

http://www.carmikliyapi.com

nouf08/28/2009

tutorial please :(

Post new comment

The content of this field is kept private and will not be shown publicly.

Icon Ads Wall

  • Openjobs - Oportunidades de Emprego para Profissionais de Talento
  • Zee - Irrezeestível Design Digital
  • Tradd.us - Contextual Translator
  • DesignFlavr, Inspirational Art and Design served daily
  • Signalnoise.com | The art of James White
  • Alberto Seveso - Illustrator
  • Description: Award Winning Portfolio and blog of Web Developer Anthony Woods

Do you want to advertise here?