Adding a creative custom background is one of the quickest, easiest ways to inject your blog with a dash of…
Adding a creative custom background is one of the quickest, easiest ways to inject your blog with a dash of color and texture, and to tie together your various design elements. It also doesn’t hurt that it’s totally free. Today, let’s examine how a background can really transform your site’s look.
First things first: all you need to have to add a custom background is an image you like. It can be a picture you already have that relates to your blog’s topic. You might choose a seasonally-inspired pattern (snowflakes or golden leaves, anyone?), or a ready-made background you’ve found on sites like Subtle Patterns or Squidfingers. You then upload it and set it as your background — either go to Appearance → Background in your dashboard, or open your Customizer, where you can preview your background as you tinker with it.
Do I need a custom background?
Not all sites benefit equally from a strong custom background. As always, the most important consideration should be the readability of your content. If a background image obscures or distracts from your posts, you should probably avoid it. If your blog is photo-centric, for example, think twice before adding an attention-grabbing background that might drown out your photos. If your sidebar already includes several Image Widgets, you might want to keep your background more low key. Remember: a crisp white background is still a background.
Highlight your content with your background
One clever way to use a custom background is to connect it — subtly or not-so-subtly — to your blog’s theme. In the examples below, bloggers have created a distinct, topic-specific look for their site with their background. From the swirling bicycles on Jim’s Bike Blog, to the old-fashioned floral pattern on period-drama fan Miss Bluestocking (to say nothing of the Mae West tile at film noir-focused site Phoenix Cinema), you immediately know what these blogs are about.
Reinforce your site’s visual design
The best custom backgrounds work in harmony with your site’s other visual elements: your color scheme, your custom header image, and the look and feel of your widgets, if any. Look how Joy, from El Blog de Joy, uses the same image for both her header and background:
The resulting look is cohesive and colorful, without becoming distracting or fussy. Likewise, children’s-book illustrator Ewa Ludwiczak uses a drawn motif that echoes her posts’ color scheme and whimsical aesthetic (it also allows her to showcase her work no matter where on her site her visitors end up):
From boldly subtle to subtly bold
Custom backgrounds can stay at the margins of your blog, or take center stage — depending on your needs, preferences, and visual temperament. A Geek’s Blog, a film- and gaming-themed site, features a deceptively simple, textured-grey background. It doesn’t call attention to itself, but it really anchors the posts’ featured images, and creates an overall sleek, inviting look:
Conversely, the background image at literature and food blog Paper and Salt shows only on a small sliver of the screen (it’s aligned left and tiled vertically). It’s used to great effect, however, to inject texture (and text) into the page, and evokes an old-school bookmark, an elegant touch for a literary-minded site:
Finally, some blogs really go all out. The writers collaborating on philosophy and theology group blog One Theology opted for a splashy, evocative background image, featuring a mysterious, cloudy swirl. In one final twist, their custom header — a graphic rendition of the site’s title — is overlaid on top of the background, creating a distinct, elegant look that sets the tone for the posts below it:
Play around with your custom background — test out different colors, patterns, and textures. Try the same image tiled and untiled, and aligned differently. You’ll see how your blog’s feel morphs as you tweak your selection. If you’re looking for more ideas for inspiration, check out other examples of creative backgrounds in earlier posts on the topic here and here. Enjoy your experiments!
A couple of points to think about:
- If you want the background image to stay behind your content as visitors go down the page, set it to “scroll;” otherwise, pick “fixed,” and the image will stay at the top of the page.
- If your image is smaller than your page, you can choose to “tile” the screen with it — your theme will copy the image to fill up all empty space on the page.
- Depending on the position of your content and sidebars, you can align the background image to suit your design.
Do you use a custom background image? How did you settle on it? How does it work with your site’s design? We’d love to hear your input.