ONE SIMPLE RULE
Website backgrounds can be tricky. You want it to be noticeable, but you don’t want it hogging all the attention. That’s why more than half the websites out there have background problems: too loud, too light, too intense. If you get your background wrong, the rest of the site just goes down with it. Here are some ways to use different backgrounds without turning your site into an eyesore.
Solid colors. The safest way to go is to use one solid color. It’s simple, streamlined, and leaves less room for design mistakes. Just pick one that goes well with your text and images, either by matching the color palette or choosing a contrasting color. Avoid loud colors if you’re going to show large stretches of background, as they can overwhelm the page and take attention away from the other elements.
Gradients. If you want more volume out of your background, try turning your dominant color into a gradient. Different shades of a single color create a subtle yet stylish effect that makes a site more elegant. Gradients can be made on Photoshop or other image editing software. You can go for a horizontal, vertical, or diagonal gradient—it all depends on your layout and how each shade will be positioned against your content.
Patterns. Not all websites can use a patterned background, but with the right image and context, you can make it work. Use a small base image, say a circle, and tile it throughout the page so that it works like wallpaper. But before plastering your site with the image, test it on your own desktop to see how it works as a pattern—chances are it won’t look the same.
Pictures. Pictures very rarely work as background images. Since there are so many colors and gradients, it’s hard to put any content over it without at least one of the colors slashing. If you want to use a picture as a background, choose one with fewer shades involved. Plan your layout so that important content goes over the least noisy parts of the image, allowing more contrast.
