8 min read
4 Website Background Ideas for 2022
Website background design has come a long way since the early days of the internet. Once upon a time, website backgrounds were just solid colors or seemingly random pictures that might not be sized correctly for the page.
These days, background images are an artform in their own right and extend far beyond your website. From cool, simple backgrounds like subtle gradients to wild abstract liquid art illustrations, the perfect website background can be like a rug that pulls the room together.
In this article, we’ll cover a few of the questions that designers ask about website backgrounds and touch on a few of the biggest trends in website background design that we’ve seen lately.
What Makes a Good Website Background Image?
A good background should complement (and not distract from) the rest of your design and have several basic attributes.
- Uses the same overall color scheme
- Matches the website and/or brand
- Does not distract from the more important elements of the design
- Sizes appropriately (i.e., the file should not be too small or too large, more on that below)
- Is high-resolution (i.e., should not look pixelated)
From there, the perfect background pattern is a matter of personal taste. If you like the way it looks and don’t think it’s distracting or a mismatch, it probably works with your design.
What Is a Good Background Color for a Website?
While the best background color for a website depends on the overall esthetic and existing color scheme, neutral, light-colored backgrounds are generally appealing for most websites. That’s because you want your background to complement the most important features of your page including text, calls-to-action, and other images.
Generally, a lighter background color will showcase the images, text, and graphics that should be the focal point of your website. Website background colors that are darker or brighter could distract too much from the elements of your site that matter.
How Big Should a Website Background Image Be?
According to WordPress.com, the ideal website background size is 1920×1080 pixels with a ratio of 16:9 and a DPI of at least 72. It’s possible the best website background image size might be different for your site depending on how it was designed, but 1920×1080 pixels is generally the safest best for a background image.
Website Background Ideas
Like anything else in design, website background trends change over time. Here are some cool background designs that will hopefully spark some inspiration for your website.
Color Gradient Background
Color gradient backgrounds are having a moment right now. Color gradients can go from a subtle look that fades one shade of a color into another, or bolder versions where different colors fade into each other.
There are a few different types of gradients.
- Linear, where the colors or hues transition in a horizontal, vertical, or sideways line
- Radial, where the colors or hues transition outward in a circular pattern
- Reflected, which is similar to linear but the hues transition like a mirror
For example, this abstract vector background with a subtle gradient loosely follows the radial pattern. Lighter hues are in the middle, and fade out to warm reds and cool blues with a warm peach in the middle.
One great thing about radial gradients for website background textures is that you can focus the important elements of your page in the middle where the gradient is less busy.
There are also backgrounds with blurred gradients, that stick to different hues in the same general color. It doesn’t follow one of the three main gradient types. Instead, it undulates in a way that adds movement to the appearance of a website.
Gradient background images aren’t limited to one or two colors. For example, there are background patterns that blend multi-colored swirls together (i.e., blues, purples, reds, yellows, and oranges). It might be too busy for some website designs, but it could be a great feature for simpler sites.
It could also be a good fit for a website where only the outside border of the background image is visible. Site visitors would still get a beautiful pop of color, but wouldn’t be overwhelmed or distracted by the swirling colors in the middle.
Pattern Backgrounds
When it comes to background patterns, it’s best to keep things relatively simple.
This background is a great example of a simple pattern that uses blocks and cool colors to create movement on the page without being overwhelming. There’s also something vaguely abstract about the pattern which gives it a modern feel.
Here is another example of a geometric pattern background. This time though, instead of a simple, repeating pattern we see a pattern of asymmetrical geometric lines and colors that fade into each other. Unlike the last pattern (which was subtler), this pattern is extremely abstract and modern.
What’s great about this background is it creates the effect of movement with the eye, but isn’t distracting.
Liquid and Swirl Backgrounds
Liquid illustrations refer to a flowing pattern of colors that can harken to Venetian paper, a lava lamp, an artful splatter a la Jackson Pollock, or anything in between.
Our first example of liquid and swirl backgrounds is this colorful paints background that brings a hip, modern take on the genre. Despite there being several lines and a few primary colors, this background complements rather than outshines the main element on the page (the content box).
There are also many examples of a liquid illustration reminiscent of the abstract expressionism of Pollock. Like this colorful background of rainbow-colored splatter that meets in the middle of the page and spreads to the edges.
One excellent thing about backgrounds that have a lot visually happening in the middle of the page, is the busiest part of the image isn’t going to distract the viewer from the important information on your website. Depending on the design of your site, the viewer may only see the occasional splashes of color radiating from the center. This gives an air of life to your website without overshadowing the rest of your design.
On first glance, this background may seem more geometric than liquid. However, the movement of the orange shapes evoke a lava lamp flowing.
With this example, the design elements of the image aren’t centered. Instead, the eye is pulled to the lower right-hand corner of the page while the rest of the page remains neutral. In addition to being a nice, simple pop of color that will delight site visitors, it pulls attention down the page, encouraging scrolling.
Nature and Landscape Illustration Backgrounds
One of the most soothing trends in website background design is illustrations of landscape (both city and nature scenes). While a landscape isn’t right for every website, many bloggers and businesses find these types of backgrounds fit their general theme, brand mission, voice, and overall tone.
This vector background of rolling hills comes in a few color variations to fit with different color schemes. Like many landscape illustrations, it has a feel of changing gradients which gives the feel of floating into the horizon.
This example is a perfect fit for travel bloggers, environmental causes, nature tourism sites, and more. Despite still being an illustration, it adds realism over the first example with rolling hills. Even with website content covering the bulk of the middle of the page, a site visitor would still be able to see the background evergreen trees, blue skies, and appealing topography.
Landscape backgrounds aren’t limited to more natural scenes. For example, this background of a city skyline brings a moody but appealing abstract take. Like our first landscape example, it makes use of gradients and a monochromatic color scheme. This encourages the viewer’s eye to wander the page without distracting from other elements on the page.
Are you ready to try out some new background images on your website? You can browse desktop and website backgrounds by artistic category (e.g., abstract backgrounds) or function (e.g., school backgrounds).
Check out our range of website backgrounds.
Was this article helpful?
More Resources for You
- 8 min read