Web Design: Photographic Background

by paulo | Aug 07, 2008

paulo's blog

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 24 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! You may also follow me on Twitter.

Camilo Oliveira 08/07/2008

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

David 08/07/2008

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

Jennifer 08/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/

neil 08/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

sphereboy 08/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.

zhennino 08/07/2008

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

http://www.luckyday.it

pickupjojo 08/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...

cykma 08/08/2008

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

fcuk 08/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

theq 08/08/2008

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

Busby SEO Challenge 08/08/2008

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

Francisco 08/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

Anonymous 08/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!