Full Screen Background Images for Web

I am a big fan of full screen background images used for a websites design.

2/3 screen to 1/3 screen is good too! The important thing is a nice glossy looking image to fill that space with good visual content.  A good quality photograph to convey your sites appeal is not something to be underestimated in terms of the visual impact and appeal that this can have for your website users. As someone who designs and builds websites, and who also is graphic artist and photographer, I can tell you that desiging a website is much easier for me when I have good visual photos to start with. The amount of energy and time that is required to make graphics that are as appealing as photographs isn’t quite the easy ticket as it is when working with good quality professional photos. To me, the ideal for 90% of nicely designed websites is good quality professional photo representation for your site and once this is taken care of, then embellishing with some well places graphics personal to your site.

So that being said, if you’re thinking of DIY building or hiring for a website, please do yourself the favour of taking the first steps of having some photos taken with your website in mind. This is important to have photos taken with the purpose of a website in mind because even though you might already have some great photos hanging around, you might find that they will not work as well with your site as there are certain key details to be mindful of for photographing for the purpose of presentation for web.

Width Wise Photos

The first and most obvious thing I try to convey to my clients whether they are selecting images from their personal photo library or hiring a photographer is the simple detail of having mostly width-wise images to work with. Computer screen monitors are width-wise, so most of your photo will want to follow suit, and this is certain for your fullscreen background image!

Dimensions and DPI (Dots Per Inch)

The photos most cameras will take will be significantly larger in size and pixels than you should have for your website. This is because cameras are generally made to be good enough for the option to print pictures in large formats to hang on your wall. This quality of image is much better quality and thus larger than what the web likes, because for the purpose of efficient webpage load times, images need to be smaller in dimension and quality for web than for print. For more info on saving images for web, please read my blog post Image Optimization for Web

With all that being said, these are the general details for good quality full screen backgrounds for web :

Dimensions: 1250 X 800 px

Resolution : 72 dpi (dots per inch)

Some of my other tips for your consideration for the purpose of website presentation include:

Colour Contrast

Bear in mind that there is likely to be other content on your website such as Text, Buttons and possibly graphics, forms etc. Especially if your background images are to be layered with these other elements, you will want to ensure that all elements are legible with contrast. If you have a dark background, the other elements should be light and vice versa to ensure high contrast.

Testing It Out

Once you’ve got some images to work with, be sure to test out their display or different browsers (Chrome, Safari, Firefox etc), devices (desktop, laptops, mobile, tablets) and screen sizes. All of these are factors in how your site and images will display so be sure to check out how your full screen background image will display with all these different factors.