Home >> Design Inspiration >> 10 Awesome Websites With Full Screen Background Images
10 Awesome Websites With Full Screen Background Images

10 Awesome Websites With Full Screen Background Images

10 Awesome Websites With Full Screen Background Images

When it comes to web design my tastes walk on a very thin line. I like simplicity and visual stimulation, which is a very difficult balance to pull off. However, one of the easiest ways to do so is by featuring a full screen background image on your site. Accomplishing this feat is not as easy as it may sound once you take in to consideration all the different sized monitors and screen resolutions out there, not to mention tablets and mobile devices. That’s not to say it can’t be done as there are multiple ways to approach this technique, but for now we’re just going to look at ten sites that utilize a full screen background image.

Go To China

 

Go To China

If you drag, shrink, pull, push and widen this page you will notice that the background image not only continuously fills your browser window, but it’s also keeping the image in scale. Meaning the image is not a fixed size where someone who has their screen resolution set to 800×600 will miss the majority of the image, where as someone who has their monitor set to 1440×900 is able to see most of it. This site is able to achieve the effect thanks to the “cover” attribute for background-size in CSS3.

Bjoern Dunkerbeck

Bjoern Dunkerbeck

Pro surfboarder Bjoern Dunkerbeck has a pretty rockin’ website complete with a full screen background image. As a matter of fact, he has multiple background images that cycle through as a slideshow while you’re on his site. Bjoern’s site uses Flash in order to display the full screen image.

The Door Works

The Door Works

The Door Works use a full screen background image to establish their high quality craftsmanship to the viewer immediately. Through the use of jQuery the image is clipped and resized on the fly. This may sound similar to what the previous sites were doing, but those sites had the image dimensions set to 100% in order to fill the screen. Meaning the image colors won’t get blotchy if the window is shrunk much smaller than the original size of the image, or the image won’t become blurry and pixilated if it’s stretched much larger than the original size of the image.

Ben Thomson Photography

Ben Thomson Photography

I’m a sucker for a good photography website, you’ve got a plethora of creative, high-res images to look at and capture your attention. And that’s exactly what Ben Thomson accomplished with his website. Ben keeps it clean and simple, only offering what’s necessary for a man of his profession to have on a website.

Fleming Steele

Fleming Steele

The Fleming Steele creative agency understands the importance of a website. They understand that a site should not only represent you and what you do, but encompass your personality and philosophy as a company. The full screen, black and white, background images of the city they’re based out of immediate triggers words in my head like “elegant”, “creative”, and “clever”.

Teletech

Teletech

Teletech dishes up some phenomenal photos as their background images, but they don’t stop there. Their site features a miniature camera icon just to the right of their main navigation bar, towards the top of the page, clicking on it results in getting background information on the photo. Unique and educational.

Gravitate Design

Gravitate Design

Gravitate Design is a bit of a special case for me. On its own the image isn’t that interesting or intriguing. But in the context of the design and the website as a whole, it’s perfection in its simplest form. It delivers some character to the homepage, it’s simple, clean and full screen. Try picturing this website with out the image, you wouldn’t have the textures that the wood and wall offer or the character and creativity that the origami crane offers. Try putting in one of the images from the other sites and all of a sudden the site would become to cluttered and you wouldn’t know what to focus on.

Medis Bar

Medis Kitchen and Bar

Medis Kitchen and Bar is another site featuring a full screen background image slideshow. In fact, I didn’t even need to know Swedish to know what the place offered or for the site to convince me I need to go there. Their images tell it all through pictures of the food, bar, coffee, cooks and servers.

Tour Alarm

Tour Alarm

I can only hope that the only thing this bus was used for was to get the background image for the Tour Alarm website. A couple aspects of the site that I really enjoyed and really worked for me was the ability to translate the page to English, from German, and the ability to close the content so you can see the full picture of the bus unobstructed. Now, whether the bus works or not is another story.

Davidia

Davidia

Davidia is a Croatian company that knows multiple forms of design, or at least interior and web design. This site is another example of a full sized background image that maintains the proper scale and proportions as it is resized. The image also never looks to pixilated, blurred or blotchy.

Content is nice, but how many of the people visiting your site do you think read every word written on your site? And, let’s be honest, was the content written because you thought the visitor had an interest in it, or because you had an interest in optimizing your site for search engines? You will notice that with most of these sites you didn’t need to read a single word to figure out what the company the website was representing did, what the service was they offered, or how good they were at their job. All of those messages were conveyed through a handful of images that perfectly represented the company. Think about that next time you’re trying to type out a 1,000 word “About Us” page. After all, a picture’s worth 1,000 words.

About the author: with over ten years in the freelance web design and writing fields, Scott Stanton has had his finger on the beating pulse of the industry’s hottest design trends and bends for the past decade. Scott regularly writes for Wix.com the free website builder. Follow him on Twitter @TheScottStanton.

Ultimate Designer Toolkit

About Scott Stanton

Scott Stanton has spent the past decade working nights developing HTML websites as a freelance web designer, only to write about the latest HTML website design trends at his day job as a freelance writer. Scott is a regular contributor for Wix.com and you can hang on his every word @TheScottStanton

10 comments

  1. Kim

    Oh I just love those! I’ve been trying to figure out just what image to use to do that with my website. I’m still at a loss, but these have inspired me even more. Thanks for sharing! I pinned most of them on Pinterest by the way! :-)

  2. Joe

    Wow..these are truly exhilarating. These are so original when using actual photo images as the background in web design

  3. Andre Morris

    These types of websites are incredible. I’ve seen a few developed on the Villiage theme that look pretty amazing.

  4. Alec

    Well it looks great information provided by you in this article. I am really impressed with this as it includes some useful guidelines. I must say that you had explained the concept in a most appropriate manner. Keep sharing such more fascinating blogs.

  5. kanon

    ElegantThemes.com has a fullscreen image WordPress theme called: InStyle

    Check it out!

  6. Apartmani Becici

    Amazing collection, thanks a lot

  7. Web Dizayn

    Nice sharing.Thank you

  8. samiksha

    vry nice…..loved it

  9. ibnu

    I think these background examples are good idea. thank you.

  1. Pingback: 10 páginas web con imágenes completas de fondo (inspiración) | El blog de David Chávez s

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

10 Awesome Websites With Full Screen Background Images