First of all, what are background graphics?
Background graphics are a type of background that gives contours to a website design.
They stand next to background images, animations and videos, and have their role in site design, when wisely used.
So, the more comprehensive question should be: what is a website background, or what are web page backgrounds?
We’ll start the explanation of website backgrounds with an example:
This example shows a combination of graphics that completes the design and gives it fine contours.
Actually, the background of a website holds the theme of the site together. Inspired backgrounds help creating an overall theme, or better customize it, so it gives the pages more personality.
Our web design experts recommend using background graphics if they answer important questions related to branding, advertising, marketing or some other promotional material.
The background creates a general feel of a website. This heavily contributes to shaping the brand and imposing its expressiveness in front of visitors. It might be part of the ways the brand exposes its values and transmits specific emotions.
Through layered effects, backgrounds give depth to web pages. They create perspective and help web surfers better get the brand message.
A modern form of website background refers to parallax:
You’ll see that, if you scroll down the page, the image in the background stays in place, while the foreground moves to the next section.
Here’s a definition of the parallax effect:
“Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling.”
Before finding the answer to this question, you need to be aware of the 2 main types of backgrounds:
Body background is the “distant” background, and users will see it covering the whole body of the pages. It can be represented by graphics, an image, an illustration, a pattern, a video, etc.
Content background is the particular background for the page content elements, such as text, images and videos. It can cover the whole page, or it can bet set individually, for page sections.
With these in mind, you can determine if you need background graphics for your website, either at page body level or page content level.
You might need a website background to:
and at this stage of web design, you’re free to experiment and innovate, but choose the graphics wisely. That is, your selection should be based on facts and data, or some A/B tests that have proved the choice to be a good one.
it seems there’s the widest range of choices, due to the vast amount of resources you find online. However, there are specific rules you should consider when setting an image as your website background, as well.
you should be careful. Videos can be used as backgrounds for presentation sites, and for sites that aren’t content-heavy. They add interactivity, but using them can be somehow tricky. You should consider using short videos, and looping videos.
Also, in case of colors, it’s simpler. It can be more effective, as well. The color(s) have to fit well into the branding scheme. And the contrast ratio (contrast between background color and content color) should be a reasonable one, so the content elements are easy to read. Even white (if you have a white background) should be selected after some time of consideration, and not just because you forgot to set the website background.
If you choose to go with background graphics, you should consider your choice and be aware you selected them for a reason. Graphics in website backgrounds have certain effects that you have to know about before making the actual selection:
Using graphics into the background can give depth to the web pages and make them look better. Users will be more inclined to analyse those pages content, as those pages have captured their attention and “told” them to stay for more.
Background graphics, when used wisely, can create perspective. The text message and other content in the pages can be seen through a specific angle, as the entire design (background graphics included) suggests users to do.
Together with the brand name and the logo, as well as domain name, the background graphics contribute to giving personality to a website. They add up to its expressiveness and are a good anchor of well-written, inspired content.
At an extended level, background graphics can serve to branding. Apart from giving the website personality, they attach Certain features to the brand. Features that you want them to show.
Simply put, background graphics serve to giving contours to the design. They are an easy way of completing the design with essential ingredients that make it shine.
Here are some more examples of graphics in website backgrounds:
If you want to find something similar, or your own style for the background of your website, you should try one of the following tools:
Before having the background graphics done, you should keep in mind several best practices that’ll ensure your design success.
Here they are:
If you focus too much on the background graphics, you might lose sight of the importance of your content. As a result, your site background might look better than your site content. As a rule of thumb, don’t let the background outshine the content of your website, no matter how interesting or evoking you find it to be. If the background graphics are highly interesting, then the content should be all the more so.
Studies show that people focus more on the space above the fold in a web page. So should you, in designing the graphics for your web pages background. Consider placing them rather at the top of the page than down the page, before users start scrolling. Also, if your background graphics are limited to the top of the page, you shouldn’t cut them abruptly. The design above the fold has to merge with the design of the page below the fold.
If the background graphics are too visible in the page, they might fail to meet their purpose: bringing your content forward. Remember their unique role is to give contours and make the content more expressive. So, you shouldn’t design anything that counters this goal. Let the content shine by itself, and have its full effect upon the website readers.
In certain situations, having a white background for your page sections is better than to overload the page with any background graphics. If you deem it necessary, you might include them in the Hero header, and limit them to this very section. It’s the first section people will see when they land on your website, so they might impress from the very beginning. Your content in the page will do the rest.
If you find it more useful to include videos for the website background, please take note they can be heavy and increase the site loading time. If you choose videos, you should choose short ones, or use loop videos and limit the number of times the video plays. In case you reduce the video size, and lose its quality, an overlay (even a patterned one) will do the trick. However, in terms of site speed, it’s better to have background graphics than a background video, so choose wisely. Graphics are much easier to handle, and they don’t overload the page.
Background graphics have to be added in a .jpg or .png format. So choose one of the previously mentioned image formats, even for graphics.
In Colibri, you have t go to the Customizer, at the General Settings section. Click on that section and expand the settings, where you’ll find the Background Image subsection. Click on Background Image in the Customizer, and upload the graphics as a .jpg or .png format.
You can set the display of the background graphics by adjusting the image size: Fill Screen/Fit to Screen/Custom, etc.
Also, you’ll see additional settings for your background, in Colibri.
For websites built with Colibri, to remove background graphics is as simple as to remove a background image.
You need to open the Customizer, go to General Settings, and then to the Background Image subsection.
You’ll expand the settings for your background, and you have to press Remove under your image/graphics, to suppress the element from your website.
After removal, you can select new background graphics, or you can leave this field blank.
In the Customizer, scroll down to the General Settings section, then click on the Background Image subsection.
You’re supposed to already have background graphics uploaded, so you need to replace them with another background. Under the graphics (uploaded as a .jpg or .png format), press the Change image button and select the new graphics/image you want to upload. The new image will display under Background Image:
To save your changes, you need to hit Publish. The new background will display onto your website.
To edit the background graphics in a Colibri website, you have the following options:
When uploading your .jpg or .png format of your graphics, you can click on Edit image and adjust its dimension, orientation, etc.
You can also:
To sum up…
Background graphics can enliven the site and give it more expressiveness. However, if not handled correctly, they might do more harm than good. This article is intended to give you the needed guidelines to use them appropriately, so you make the most of their use. A set of best practices, some examples that’ll serve as starting point, as well as a collection of tools to create your own backgrounds should contribute to an advanced use of background graphics.