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
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
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 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
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
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 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 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 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.
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 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.
0 件のコメント:
コメントを投稿