What do you think about websites with background photos? When website owners choose a photo background for their website, is this practice worth the time or is it all just the latest fashion?
The question is disputable and it proves that online audience is highly puzzled with those big pictures placed on backgrounds of web pages.
Let’s define the most common pros and cons of using photo backgrounds.
Pros of Applying Background Images
Cons of Applying Background Images
Here we’d like to show you some examples of a bad use of background images. We guess there is no need to explain why these designs are considered to be bad. Just take a glance at the screenshots to remember them once and forever.
Now when all the pros and cons of using photo backgrounds are clarified we can start a deeper research of their use in web design.
If you’re quite attentive on the web you probably noted that actually there are 2 different types of backgrounds: pages background and content background. This structure allows to use different kinds of photos and images more creatively and to make texts easier to read.
When content lies down directly on body pictures it can cause a mess on the page. Previous examples of websites demonstrate a bad use of the bottom layer. It is quite destructive to mix background, colors and animation in such way.
If you don’t want to use content background sections you should clearly balance the entire background and text colors, so that they look eye-pleasing. Hidden Depth website is an obvious case that demonstrates how simple text can complete photography layers. Thin ghost buttons perfectly serve this design and have something in common with trendy flat style (however, it is by no means flat).
The following hotel website design is also an impressive design with header photo gallery.
In this post we’d like to accentuate your attention on common website backgrounds because they provide a discretion and seem to be more interesting for designers. Thus let’s consider which placements are good for illustrated backgrounds.
This is a great way to dash and liven up any content-rich website without a risk to damage sites usability. This method is also good because it fits designs with both harmonious tones transitions and contrasting color combinations. If you’re a beginner designer you may need to practice colors blending effects and to remember colors matching rules.
Here we selected some free and simple color calculators that may help you be more confident of the chosen color scheme.
Photo headers are not so popular, however, they are well perceived by all categories of web users. That’s why if you decide to use them, you can certainly be successful. Header images can be displayed within the entire site or on the home page only.
Large photo backgrounds are probably the most user-friendly elements that catch the eye. When applied to a home page only they simplify designers and developers tasks greatly. A well done professional image doesn’t imply large content sections – it requires a simple menu, logo and probably a short generic slogan. Such designs present your business for an average web user and motivate to look for more information within the site. If you have any intriguing picture that relates to your business use it and see what your site can look like.
If you’re puzzled with a question which background size is recommended then we have to upset you – it is impossible to give a definite answer. Nowadays there are too many monitor configurations that have different resolutions, though nobody knows which device your visitors will prefer. Too large images will overload web pages. Too small pics will also take some time to adjust dimensions. What’s the solution? Choose a photo background about 1680 x 1050 and test your site with one of free website speed checkers.
These tools will show you how long it takes to load and stretch/tighten a background as well as other layout elements. Choose a tool you’re familiar with or test current ones – they are quite user-friendly and effective.
When talking about full-screen backgrounds it’s almost impossible to keep silent about parallax web design. This trendy design is appreciated by common web surfers as well as professional developers. It looks really awesome.
Nobody cares that parallax-based websites take longer time to load (just a second or two) or that they are too complex for mobile devices. These ‘always important’ factors pale the before beauty of parallax. So brush your doubts away and choose a photo background whether it’s parallax or not.
Front-end developers who’re always good at parallax scrolling use full-screen photo backgrounds to turn over web pages. Ratatattoo website demonstrates it in a very elegant way, so once you view it you’ll like the design.
Another way to use a photo background in parallax website is to combine photo with graphic elements. The idea is pretty simple but it can be so amazing that words can hardly describe it. Spare no time to open Bolio site and to scroll the mouse wheel – the magic of the black cat on the stairs amazes.
There is a tricky moment when you use full-screen photo backgrounds and that’s in the field of human eye structure. Our eye is created to perceive separate objects better then those merged on the background. It is essential and understandable for human bodies and brains. However, it happens that background colors have deeper contrast than main content. It causes a little brain confuse and our attention blows over. Thus if you want to be sure that visitors’ eyes are focused on content use pure colored backgrounds or apply light blur effect via any visual editing software like Adobe Photoshop. You can also reach a good effect if applying transparent effect to the entire background or its parts. Thus main content will be easily accepted and a photo background won’t keep visitors’ attention away.
Let’s take a look at some designs that use out-of-focus photos as header or full-screen backgrounds:
Now let’s summaries what we know about images in web designs. We are sure you know it well but it’s always good to have a short checklist to control all the details.
Now you know everything to decide whether you like websites with photo backgrounds or not. Your site can bring a real chance to get the word out, so hold on and don’t be upset if something goes wrong. A good photo can solve all your troubles and amaze potential clients! Do go ahead and create really stunning websites with photo backgrounds.