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.
What is a website background?
Actually, the background of a website holds the theme of the site together. Inspired backgrounds help to create 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 website trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling.”
Why should I need background graphics for my website?
Before finding the answer to this question, you need to be aware of the 2 main types of backgrounds:
- Body background
- Content background
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 be 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.
But why should you need one?
You might need a website background to:
- Give your company’s story a good start. As you already know, images, and graphics, as well as videos help a lot in telling a story. And when it’s about the company’s story, you might want to use them for a plus of expressiveness and emotion, or for setting the frame…
- Anchor your content and message onto graphical elements. Your site might focus on the pages content and message, but they’ll find a good anchor in a well-chosen graphic element or image, even color…
In case of graphics
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.
Example:
In case of images
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.
Example:
And in case of videos
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.
Example:
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.
Example:
What effects do background graphics have in websites?
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:
-
They give depth to the website pages.
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.
-
They create perspective into the website pages.
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.
-
Graphics give personality to a website.
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.
-
Also, graphics serve to branding.
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.
-
They serve to giving contours to the design
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:
Free background generators
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:
Best practices for background graphics in websites
Before having the background graphics done, you should keep in mind several best practices that’ll ensure your design success.
Here they are:
-
First and foremost, don’t let the background outshine the content of your website.
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.
-
You should focus on the graphics at the top of the page. However, don’t cut them abruptly.
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.
-
Don’t try to make the graphics too obvious in the page.
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.
-
Sometimes, it’s better to have background graphics only in the Hero header.
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.
-
Remember that videos can be heavy and slow.
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.
How to add background graphics in a website?
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.
How to remove background graphics from websites?
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.
How to change the background in a website?
In a Colibri website, you can replace the existing background with a new one, from the same sections as indicated above.
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.
How to edit your background graphics in the site?
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:
- Attach an alternate text to the graphics/image
- Customize its title
- Create a caption for the graphics
- Fill in the blank space with a specific description of the graphics
- Reposition the image/graphics
- Check the graphics/image to scroll with the Page
- Choose to repeat the background graphics/image, and test how it looks
With Colibri, you have freedom to adapt your selected graphics to the design you want to configure for your site.
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.
We’d love to hear about your experiences with background graphics, and we’d like to see your websites, on their way to success.
