30 Beautiful Web Designs That Use Photos as Backgrounds

Aug 31 2012 by Jacob Gube | 9 Comments

30 Beautiful Web Designs That Use Photos as Backgrounds

Using large photographs as the background of a website’s layout can be a quick and easy way to make it unforgettable. In this web design showcase aimed to get your creative juices flowing, you’ll discover some gorgeous sites that use photos of people, landscapes, objects and more as their backgrounds.

1. The Papermill

Photo background example: The Papermill

2. SALT SURF

Photo background example: SALT SURF

3. FiftyThree

Photo background example: FiftyThree

4. Twenty8Twelve

Photo background example: Twenty8Twelve

5. The Kitchen Community

Photo background example: The Kitchen Community

6. Circles

Photo background example: Circles

7. Jason Miller Studio

Photo background example: Jason Miller Studio

8. Encandle

Photo background example: Encandle

9. A Book of Beards

Photo background example: A Book of Beards

10. Archikon

Photo background example: Archikon

11. Healing Histories

Photo background example: Healing Histories

12. The Old Barber Shop

Photo background example: The Old Barber Shop

13. Mathias Sterner

Photo background example: Mathias Sterner

14. Spring/Summer

Photo background example: Spring/Summer

15. Blind Barber

Photo background example: Blind Barber

16. Beg Bicycles

Photo background example: Beg Bicycles

17. Banger’s

Photo background example: Banger's

18. Epic Discovery

Photo background example: Epic Discovery

19. Hiut Denim

Photo background example: Hiut Denim

20. Whitmans

Photo background example: Whitmans

21. Onside Sports Agency

Photo background example: Onside Sports Agency

22. Locals Apparel

Photo background example: Locals Apparel

23. Minerva

Photo background example: Minerva

24. Friendly Gents

Photo background example: Friendly Gents

25. The NoMad Hotel

Photo background example: The NoMad Hotel

26. Fueld Films

Photo background example: Fueld Films

27. Pure Pleasure Design

Photo background example: Pure Pleasure Design

28. Royale

Photo background example: Royale

29. Whiteboard

Photo background example: Whiteboard

30. Cappellos

Photo background example: Cappellos

Related Content

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

9 Comments

Lars

August 31st, 2012

Nice examples.

I think a site like this would fit in here as well: http://www.danishcrown.dk

Therron Jones

August 31st, 2012

Hey Jacob,

Awesome post and equally great examples! Two questions: 1) How do developers get the images to remain stationary? 2) How do designers maintain the image proportions on various screen resolutions (no image distortion)? This is something I’ve been trying to figure out for a while. This post makes me want to know even more now!

SYDNEY MILES

August 31st, 2012

I love “Minerva” as its design evokes a certain mystery and makes one feel he is right there in that cold and misty place. Very creative and effective use of design overlay…Thanks for sharing, Jacob.

Joseph

September 1st, 2012

Thank you jacob it’s a very good package and deep photos

Web design professional in India

September 5th, 2012

Awesome pics, pure pleasure design is awesome one

Lorenzo

September 5th, 2012

Really great suggestions, I found some of these sites really inspiring, I feel I went too much into simple, blog style web sites, now I want to change. thanks:) see my works at: http://www.eclectic-design.it
cheers

Jameos

September 6th, 2012

@Therron James
Looking at the css for the site, it’s pretty simple really:

{
background:url(1200plus/5784.jpg) 50% 0 no-repeat fixed;
color: white;
height: 1800px;
margin: 0;
padding: 0 0 0 0;
}

You can check out the entire background image at http://www.minervastreetwear.com/lookbook/1200plus/5784.jpg

For the minerva logo in the middle, he is just centering a transparent .png.

Leave a Comment

Subscribe to the comments on this article.