Mar 19, 2014 / Beginner

Quick Tip — Backgrounds: Use Your Inside Voice

A study in making good choices for your site’s background.

While it might seem superficial, when it comes to building your blog’s brand, growing your audience, and attracting followers, your site’s appearance makes a critical first impression. It’s essential that your site background complements and supports your brand, giving your content the spotlight.

Today we present a short study in backgrounds so that you can see the effect different backgrounds have on how your blog appears to visitors. My dog Gus has a blog and we’ll use it to show some good, bad, and downright nasty options. (Wait, your dog doesn’t have a blog? You can get one for him, or your cat, your rabbit, or your imaginary friend. Having a test blog is a great idea — it allows you to experiment and test things out before you bring them to your main site.)

Go to My Sites → Customize → Colors & Backgrounds to experiment with your site’s background color. Note that changing your blog’s background color does require a Custom Design upgrade. Uploading a background image, however, does not require a Custom Design upgrade.

The dos and don’ts of background color

Gus uses McKinley for his site. It’s a minimal theme that combines a white main content area, a dark masthead, and a light-gray background that emphasizes his content. Check out how the default gray background allows his writing and photos to take center stage:

The default gray background allows Gus' content to stand out.

The default gray background allows Gus’ content to stand out.

Check out how this slightly darker gray adds some gravity to the site, but still feels a little lifeless:

A darker-gray background won’t steal the show, but it’s a bit dull, too.

A darker-gray background won’t steal the show, but it’s a bit dull, too.

A solid, complementary background does a great job enhancing the overall look of the site without overpowering the main content area. The customizer offers you several complementary colors to choose from, but don’t be afraid to use the color picker to choose your own, like we did with this blue — it adds a splash of visual interest without trying to hog the microphone:

This blue adds some warmth, without usurping the content.

This blue adds some warmth, without usurping the content.

Now, let’s see how much havoc we can wreak with Gus’ background and try some wacky colors. This bright purple is a bit of an attention hog:

I like to call this shade “Lookit Me Purple.”

I like to call this shade “Lookit Me Purple.”

From light-gray to this neon green is like a whisper to a scream:

This green is so loud, it’s screaming. Doesn’t it stress you out?

This green is so loud, it’s screaming. Doesn’t it stress you out?

Beware of background photos

To experiment with background images, go to Appearance > Customize from within your dashboard, and then choose Colors on the Customizer. You’ll need to scroll down, beyond the Background Patterns to the Background Image area.

Things can go from bad to worse quickly with a hastily chosen background image. Do you notice how your eyes are drawn toward the pizza and away from Gus’ photo?

When the blog hits your eye like a big pizza pie, it’s not amore.

When the blog hits your eye like a big pizza pie, it’s not amore.

Even worse, when you can’t even tell what the photo is, but it steals your attention away, anyway.

Whoa, Nelly. This background image does nothing to emphasize Gus’ content.

Whoa, Nelly. This background image does nothing to emphasize Gus’ content.

Background patterns: choose them with care

Background patterns are very tricky. While personal styles may vary, we recommend staying away from any pattern that distracts viewers from your content. For best results, go for minimalist, subtle patterns to lend texture and personality.

This light, somewhat subtle pattern seems to suck the life out of Gus’ content:

This pattern draws the viewer’s eye toward the birds and away from what Gus has to say.

This pattern draws the viewer’s eye toward the birds and away from what Gus has to say.

Patterns create a sense of movement on a page and without a careful choice, you run the risk of making site visitors dizzy.

Ow. My eyes.

Ow. My eyes.

Small, minimalist patterns can create depth and texture, enhancing your site’s look, without stealing the show. We recommend Subtle Patterns, which offers nearly 400 free patterns you can download and then upload as your site’s background image. Here’s a nifty sample called wild flowers — doesn’t it look nice?

This background photo adds some nice texture and speaks using a nice, quiet “inside” voice.

This background photo adds some nice texture and speaks using a nice, quiet “inside” voice.

Design Whoop also offers 20 free subtle patterns you can download and use as your site background image. Now it’s your turn to get busy experimenting with color, background images, and patterns on your site. Experiment away, all!

Show Comments

65 Comments

Comments are closed.

Close Comments

Comments

  1. I am waiting for the background expert (Bumblepuppies) I know of to come comment here. Meanwhile a (sort of related) question–do any themes let you change color of your title or tag line font colors without upgrading? Even the New Page Titles that I add default to a “very sleepy gray.” Great post.

    Liked by 2 people

      2. And come to think of it, changing the font should be possible with any theme, in theory at least. There’s an option that allows you to not display the text. Choose that. Then, create a header image that includes your title and tagline on it. That’s how I did mine.

        Liked by 1 person

      4. So you’re saying to make your own “title” (color, size, font style, etc.) by doing it in a word program, saving it on your computer and then using that whole thing where it allows you to use a header (in my case it would be instead of my purple feather boa?)

        Like

      5. Well, a lot of people import pictures into a program (several exist) that allows you to put text on top of images. I think picmonkey.com may offer that online for free, but it’s easy enough with any sort of Paint program. So you could have text on top of your feather boa image (in the boa’s current location, which would look a little goofy with your current theme) and you even could stick it in the graphic’s white part so you don’t interrupt the boa image.

        My header came from Power Point. Any slide you create in that program can be saved as a JPEG or a PNG, and the PNG can be transformed into a transparency with other programs… which is how I got the effect mine has.

        Like

      8. Yes. That’s good too… although the blog title appears twice. The top set of title/tagline can be eliminated (although like you that person is using a theme where the header image appears relatively low on the screen.)

        Like

      11. Realistically, though, you ought to be able to make these yourself by now. So get off your butt and start shooting some pics.

        @Bumblepuppies, I admire your “tough love” approach — made me laugh. (Thanks, I needed that.)

        Liked by 1 person

      12. Thanks.

        And just out of curiosity, the opportunistic stat-hogging blogger in me wonders if you could make the link in my earlier comment actually link to the page. That’s usually not a problem…

        Like

      15. And come to think of it, changing the font should be possible with any theme, in theory at least. There’s an option that allows you to not display the text. Choose that. Then, create a header image that includes your title and tagline on it. That’s how I did mine

        This is how I did mine as well. It’s a great way to make your free blog look a lot less… “free” so to speak. At least in some themes like the one I use. Other themes may already have an attractive header text and style.

        Like

  2. I also wanted to add how much I love that you give your dog’s blog as an example here! I was waiting for one of the background samples to be little kitty cats! Also your idea of having another test blog is BRILLIANT. Thanks again.

    Like

    1. Ah, thanks! I have three dogs. They all have their own blog. 🙂 Having a site like that is a great sandbox you can use to experiment so that when you’re happy with your changes, you can replicate them without fear of messing up your main site’s look or content.

      Liked by 1 person

  4. Thanks for this post. I have experimented with background colors often. Perhaps I should stick with just one . . . always. But there are so many from which to choose!!!

    Liked by 1 person

  6. I used a subtle pattern from (I think) Subtle Patterns. It, to me, mimics the look of an apron a chef might wear. Which, just happens to be, perfect for a blog about cooking. 🙂

    Liked by 1 person

    2. Love the texture in the background, on your site, @Kathryncooks — it has that fabric feel that works perfectly as an apron, or perhaps even a linen napkin. Either way, it’s great.

      Like

  7. Another great article full of invaluable advice. I’ve always believed that clean and clear is best and stay away from backgrounds but I can now see that a very subtly touch of color might be needed. What do you think? I’ll experiment on this a while…

    Like

  8. I recently changed my theme and added a background. I love it myself , but I am on the fence about it because of the very reason you give. I don’t want the background to be too busy. The examples you show are great.

    Like

  9. Great advice for experimenting with background colors. I need to work on figuring out what colors look best for the theme I have. It’s great to learn new ways to make a blog even better.

    Like

    1. I love the bright colors, @Yasmin — I think they work well together. The repeating triangle motif is quite striking!

      If you’re looking for some more feedback at any point during your blogging journey, we run a “Community Pool” where you can leave a comment and ask the community to share some feedback on your site. There’s a group of awesome, dedicated community members who offer constructive feedback to one another on writing, design — essentially anything you’d like specific feedback on.

      Check it out — this was last week’s edition:

      https://wordpress.com/dailypost/2014/03/16/community-pool-55/

      The Community Pool runs every Sunday.

      Like

  12. An interesting topic. Yet currently the popups in the WordPress reader are designed for ease of reading and to encourage readers not to visit your actual blog, so a bit of a conundrum.

    Like

  13. Here’s the background photo i used as wall — it’s a de-saturated palest grey-blue old photo of our Uncle Romy; he died Monday last week — there’s a superimposed quote on the other half “I see a beautiful city and a brilliant people rising from this abyss… in their struggles to be truly free … It is a far, far better thing that I do, than I have ever done; it is a far, far better rest I go to than I have ever known.”, from a character in Charles Dickens’ A Tale of Two Cities, superimposed on the side. The wall is a de-saturated version of a purple post (posterized photo) — i deactivated the “Like” button on the mourning posts. i’m keeping the design until after the mourning period (and i don’t also feel like blogging much for this week; so i just posted here) To view, click: http://marichulambino.com/
    The theme is Quadra, i think it’s one of Matt’s designs, Automattic.

    Like

  16. I would love it if any of you would like to check out my site + see if its too noisy? I have Gif’s + pretty bright colors which I think works for my brand, but would love your insight? If anything I think my body font is all wrong. Thanks + great article!

    Liked by 1 person

    1. The background stands out, but it isn’t too noisy. What would help is changing the opacity of the background image to fade it out enough until it’s not as much of a distraction. It would make the content area pop while still maintaining its nature. As for the .gifs I always love those as they add a lot of fun and character. Only thing though since your blog is on infinite scroll, for those with slower connections it could really take awhile to load with all the graphics and such.

      As for the body font, it looks good to me!

      Like

  17. Why oh why did I never think of a test blog. I mean, I’ve only been doing this for a couple of months but still, it seems so obvious! What a great idea.

    The background really makes or breaks a blogs feel sometimes which makes it really hard to choose one. i went through a bunch until I stopped on the one I have now. It’s definitely tricky to find the happy medium between subtle and appealing and too boring, as well as something that matches the rest of the theme.

    I have a few links on my blog’s sidebar dedicated to finding a background that helped me. A couple are background generators I found to be pretty sweet, as well as a site that has a great selection of pre-made ones. Also have a couple of free stock photo sites. I wanted to try and give back to the community based on my experiences. Hope someone finds them useful!

    Like

  19. Useful post, thanks. I’m a photographer so always stick with a neutral grey or white background, as anything else can clash with the colours in the website photos. More importantly, my dog doesn’t have a blog…. yet!

    Liked by 1 person

  20. Great post, I have recently changed my theme and have tried to experiment with having a background but my options are very limited unless I purchase the theme. I do like the theme I am currently using and feel it fits in well with the content but I do think at times it needs a little more je ne sais quoi 😀

    Like

  21. Interesting information — I am new to blogging and when setting up my page initially had to redo it a few times before I went public as I didn’t like the appearance at all.

    Liked by 1 person

  26. I love interesting backgrounds. I always made my own background to suit every theme. Usually I use pattern background which I also share with readers as download desktop and mobile wallpapers.

    Like