The background of a project is one of the key elements that influences the perception of a website, often becoming its signature. Page backgrounds can tell a lot, and they don’t always match the site’s theme exactly. Artwork, images, photos, videos, textures, gradients, and solid colors — all of these form one massive pool from which a web designer must constantly choose.

It might seem like everything about web page backgrounds has already been said. There are huge libraries of texture files and interesting samples, countless books and articles on the internet. But every time, a designer (or a student in web design) still faces the same question: “Oh my God, what should I choose? A photo or a video? Maybe some nice art? Or no, better use a photo with filters and effects.” Meanwhile, the client may be brief and to the point: “Something simple and unique , of course… you know what I mean.” So, in reality, choosing a background is not such a simple task. Sometimes, designers spend hours trying different shades — it ends up too bright, too pale, or just plain dull.

A background can be bold or light and airy, invisible or dynamic, static. As for the color palette — in recent years, pure white backgrounds are rarely used. More often, they are slightly gray or beige (warm tones are calming and less tiring for the eyes). At the same time, in many projects it’s hard to tell where the background ends and the content begins.

That’s why our main focus here will be on choosing the right background and understanding whether Photoshop is necessary.

Color or Gradient

Classic and most popular styles globally are solid backgrounds and gradients. These options pair well with images and text and can be done in various color palettes. Most often, you’ll see neutral tones — they go well with any foreground elements and don’t interfere with layout decisions. At the same time, some designers work exclusively with bright backgrounds (think of duplex-style examples), and then make all the elements simple and subtle.

But when it comes to gradients, opinions split into two camps: using a single color fading to white/black or blending two contrasting colors. Both approaches are popular, though the single-color gradient is easier to implement regardless of style or trends.

Projects like 90yearsofdesignphilips, dowjones, greenname, apple, nvidia, packwire are great examples. Some were created recently and became WebbyAwards winners, others were built long ago but still use the same design because it remains convenient and classic.

Subtle Pattern

Another popular type of background is the pattern. These are created using colors or simple shapes, tiny icons of objects. Despite their size, these bits can create a sense of three-dimensionality by giving a slight depth to the design. We’ll get back to this later.

The main feature of patterns is that they are often so small the human eye doesn’t notice them — yet they gently lift the site elements off the canvas and help users focus on the content.

Patterns can be used with any background color, but the designer must balance the contrast so it doesn’t clash with or overpower the color palette of the content.

Faceofhomelessness has a plain gray background, but at the bottom of the page you’ll find a small dotted pattern — the same used in the video and logo images.

This is Teixido is a designer studio website with a textured gray background. The overall design is flat, strict, but elegant and stylistically clean.

CSS Design Awards winners like paybase, chekotin, World Architecture Week 2016, UNIEL ltd. Corporate Site, Pixel use textures as backgrounds on their main or all project pages. Not art, not photos — just a pattern. Sometimes vivid and used for sections, other times barely noticeable, blending into the content.

Photos and Videos

It’s hard to say which background type is more popular — color or photos/videos. Both photos and videos are often used fullscreen and serve as a “cover” or an introduction to the content. Sometimes you can’t even tell where the “background video” ends and the main content begins — when done right, they form a unified whole.

Photos and videos are more difficult to work with. They must be not only beautiful but also functional and convenient for placing elements, buttons, and text on top. We’ve written about this in detail in our blog before, so we won’t repeat everything here.

Let’s showcase some particularly beautiful projects that use video and photo backgrounds: Hotel Tann, INDASTRO, Boorbool, Honders/Alting, lavva . digital studio, tourdargent.

Illustration

Just like photos or videos, illustrations offer interactivity and visual appeal. They can also be tightly integrated with the content, making it nearly impossible to distinguish where the background ends and the content begins.

Most designers who use illustrations work on highly themed projects or personal works. That’s why it’s hard to find unique illustrated elements (icons, strips, buttons, etc.) in public libraries. Repetition is common.

Illustrations, art, and visual effects help create the mood of a project. For example, in The Power of Pomegranate, RBC used watercolor illustration to convey the richness and tartness of the fruit — something photos couldn’t capture fully.

Threecents used illustration with animation to tell a story about soda water and bubbles. Clear, engaging, and visually effective.

Projects like 2016 Trends in the Watch Industry, Mi Banxico (on banking and finance), Eurovet, and others — feature various styles of illustrations, including 3D and volumetric objects.

Handy Tools

Background types are clear — but how do you bring them to life? It’s great when a designer can draw and sketch fruits or objects by hand, then refine them in a graphics editor. But what if they can’t? What if you want something that’s not a photo, not a video, not even a drawing — but something unusual?

Photoshop Texture Examples

Sometimes even a massive library isn’t enough, and you have to create and invent in Photoshop. In truth, creating a patterned background is not difficult — you won’t even need plugins or extensions. The tricky part is softening the edges or creating a bit of depth. Let’s focus on that next.

Option 1

Create a small canvas — usually 100x100 px, but for clarity, we used 600x600 px — fill it with a dusty pink color, and apply Gaussian blur noise.

Then go to the Filter Gallery and choose Accented Edges. Settings are up to your taste, and each change to the three parameters gives you a completely different pattern.

The pattern is basically ready, but if you tile it, you’ll see seams. That’s what we don’t want. But it’s easy to fix. Go to Filter → Other → Offset and shift the image by half the canvas size — so for 600x600, set it to 300x300. Now the seams are visible, and if you tile this, they’ll repeat everywhere.

Select the Healing Brush Tool, hold Alt + left-click to pick a sample, and “paint over” the seams. You can also use the Spot Healing Brush to gently blend the edges without using Alt.

Now just save the pattern (Edit menu), and later you can select it as a fill pattern in any new document.

Using this simple method, you can create all kinds of backgrounds and not worry about visible seams when tiled. As for the design itself, Photoshop includes a huge number of filters with extensive settings — nearly every background will be unique.

Option 2

But what if you don’t need filters? Let’s try drawing something geometric — for example, a simple cross — and see what we can get from it.

Create a 600x600 px canvas and fill it with blue. Then choose the Line Tool (2px) and draw a cross.

Merge the two shape layers, press Ctrl+T, and while holding Alt, scale the cross down a bit. Rasterize the shape layer and duplicate it (Ctrl+J). Then use Edit → Adjustments to change brightness and saturation so the duplicate becomes almost white.

Use the Move Tool (arrow icon) and shift the layer with arrow keys on your keyboard until you’re happy with the position. You may want to reorder the light and dark layers — experiment!

Now go to the color layer and add 1% Noise from the Filter menu. Resize the image to 50 px, for example. Adjust colors or shift layers if needed — let your creativity flow. Save the pattern.

Now you can choose any canvas or object, apply a fill with the pattern, add gradient, lighting, and other effects. This creates a kind of quilted volume — and there’s no need to adjust Offset anymore. A similar approach was used in the dowjones project.

Conclusion

As seen from the examples above, backgrounds vary in style and technique — from subtle patterns and graphics to large-scale photos, or even a blend of invisible textures and gradients. The combinations are many and nearly endless.

The key to effective background selection and creation is the overall concept of the project. For example, a jewelry-themed site might use polygons, crystal-like shapes, plant motifs, or subtle noise textures and brush strokes. colly uses a grid pattern, staffanstorp uses background noise (yes, it’s there!), robot-or-not uses a transparent illustration as a background. The background should be part of the whole project, not just a backdrop behind sections and elements (icons, text, etc.). We've already covered many effects (though not all!) in our blog — you'll definitely find what you need there.

Remember: the background may not be the first thing a visitor sees — but that doesn't make it secondary or unimportant.