Designing with Large Photo Backgrounds & List of Show Cases
Like every photograph, large background images say more than a thousand words. It almost looks like an unstoppable design trend these days.
The RichWP Theme FrameWork allows you to integrate large photo background images into your design in 3 different ways. In the Body Background section of the Design & Colors tab you can set up:
1. A large background image with fixed positioning
Simply tick the box to display a body background image, paste an image URL into the box, chose a position and tick another box to be fixed. I use this solution if I have a background image that somehow fades into the background color or consists of isolated objects. Check the following examples to get an idea of what I am talking about.
2. A full size background image
Use the full size option to use set up background images that do not fade into the background color. The images will be automatically resized to the user’s browser window size. The trick here is to use an image with a resolution large enough to look crisp and clear in most standard sizes, while also keeping the file size small enough to maintain loading times at a minimum. There is no rule of thumb here. Analyze the examples in the showcases listed below. If unsure, try to keep width at around 1280px and file size under 200kb. Playing around with different .jpg compression rates and algorithms sometimes works wonders.
3. Randomly chosen full size background images
If you want to change the background images that you serve your users, you can set the body background to be randomly chosen from 5 image URLs. Note that the refresh rate of your caching settings determines how often a new background image will be chosen. I recommend setting it at 3600 seconds.
Showcases of large image background sites
Plenty of web design blogs have already published high quality lists of websites that use large image backgrounds, so I’m not offering my own. Take note of how other designers display the navigation and the content. What color schemes do they use? Do they work with semi-transparent backgrounds to let the images shine through the content boxes? If they are not using Flash, try to analyze the width and file size of the background image they’ve used. As always with list posts, a couple of the links don’t work or the design of the shown websites has been changed. That’s why I have chosen showcases that use screenshots large enough to get their point across. Feel free to be inspired and experiment with your background settings.
- inspiredology.com – 25 Large Photo Background Websites
- acrisdesign.com – Showcase of Websites with Large Photo Background
- speckyboy.com – 50 Large Photography Backgrounds within Web Design
- tripwiremagazine.com – 20+ Web Full Size Photo Background Sites
- psdfan.com – A Study of Photographic Website Backgrounds
- webdesignerwall.com – 80 Large Background Websites
- artfans.info – 32 Example Websites with Large Background Image
- vandelaydesign.com – Showcase of Big Backgrounds in Web Design
- designtutorials4u.com – 40 Awesome Websites with Big Backgrounds
- bestpsdtohtml.com – 30+ Websites with Beautiful Large Backgrounds