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:
Check out how this slightly darker gray adds some gravity to the site, but still feels a little lifeless:
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:
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:
From light-gray to this neon green is like a whisper to a scream:
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?
Even worse, when you can’t even tell what the photo is, but it steals your attention away, anyway.
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:
Patterns create a sense of movement on a page and without a careful choice, you run the risk of making site visitors dizzy.
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?
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!
Currently blogless? You’re a click away from sharing your story.
Create your blog at WordPress.com
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.
LikeLiked by 2 people
Why thank you! A most excellent and convenient place for me to advertise the post I wrote on this very topic:
Krista’s advice is good (as always), but mine is more fun. 😉
LikeLiked by 1 person
I knew you’d arrive. Thank you.
LikeLike
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.
LikeLiked by 1 person
Thank you for answering 🙂
LikeLiked by 1 person
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?)
LikeLike
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.
LikeLike
This blog features another great way of doing it:
http://peasandcougars.com/
LikeLike
Ahh, okay. I see. That looks really sharp. I was going to ask you (before you posted your example) kind of like this one?
LikeLike
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.)
LikeLike
Doesn’t Peas and Cougars appear twice as well?
LikeLike
Now that you mention it, yes… at least halfway. P&C only has one tagline, though, which is probably why I missed it.
LikeLike
LikeLiked by 1 person
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…
LikeLike
Your wish is my command. Done!
LikeLike
Thanks. 🙂
LikeLike
LikeLike
Great suggestion @Bumblepuppies! @Little Miss, we wrote an article about how to make free, awesome headers that you might be interested in:
https://wordpress.com/dailypost/2014/02/18/free-custom-header/
LikeLike
The Mystique theme does.
LikeLiked by 1 person
Thank you! I love mystique. Wasn’t there a book called the Feminine Mystique? Will check it out. The theme, not the book. 😉
LikeLike
The only mystique I ever heard of was from Xmen. Sure you’ll love it. The theme, not the movie *tongue out*
LikeLike
GREAT reply back to me! You’d be fun to play tennis with, wouldn’t you?
LikeLike
It seems that every customization costs! But, I am interested an hearing answers to your question.
LikeLike
You can upload a background image to your site without upgrading. With the background images available for free at Subtle Patterns, you might be able to find something that suits your fancy and add some style and panache without spending any money.
http://subtlepatterns.com/
LikeLiked by 1 person
Hum is another theme that allows for a custom header image, custom header text color, and custom background color, as well as custom background image, for free: http://theme.wordpress.com/themes/hum/
LikeLike
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.
LikeLike
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.
LikeLiked by 1 person
Thank you for all of the pro tips lol. I’m trying to learn as much as possible
LikeLike
I am making a test blog immediately!!!
LikeLike
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!!!
LikeLiked by 1 person
Great Post! SUbtle Patterns has some beautiful stuff!
LikeLiked by 1 person
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. 🙂
LikeLiked by 1 person
So cool! i saw a couple on there that would be perfect for DIY blogs and home decor blogs. I found some cool stuff for my “middle aged ranting” blog.
LikeLike
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.
LikeLike
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…
LikeLike
Experimentation is always such a blast. You never know what you might come up with.
LikeLike
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.
LikeLike
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.
LikeLike
LOVE!!!! My blog needed a pick me up but every image I tried seemed so busy. I just downloaded four Subtles and am playing around. Thank you for the well-timed advice. Just what I needed on a gray day.
LikeLiked by 1 person
Great article! What do you think of my blog design? I just started and some advice would be great! 🙂
LikeLiked by 1 person
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.
LikeLike
Wow!!! That’s great!! Thanks a lot for your feedback! Truly appreciate it!
LikeLike
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.
LikeLike
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.
LikeLike
I like the examples you used! Thank you for the instructions 😀
LikeLiked by 1 person
Opps! I *thought* I was adding the background to my test blog, but no, I was in my live blog. Great tips and resources, thanks.
LikeLike
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!
LikeLiked by 1 person
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!
LikeLike
I’d also recommend checking out our Community Pool — where you’re invited to leave requests for specific feedback on your blog — it takes place each Sunday:
https://wordpress.com/dailypost/2014/03/16/community-pool-55/
LikeLike
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!
LikeLike
I chose a somewhat busy background pattern, but it’s relatively dark and hopefully not too loud. I’m just odd like that 😉
LikeLike
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!
LikeLiked by 1 person
Every dog deserves his / her own blog. 😉
LikeLiked by 1 person
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 😀
LikeLike
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.
LikeLiked by 1 person
This is really helpful. I clicked, thinking that it was going to be advice on in-photo backgrounds but was pleasantly surprised.
LikeLike
I wonder can you use two different appearances within the same blog to differentiate between two distinct voices/ authors in the blog????
LikeLike
Great food for thought……thanks : ) Trees
LikeLike
Awesome. Have tried many background colours over time. Mainly testing for fun.
LikeLike
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.
LikeLike
This is so helpful as I am new. Thank you!
LikeLike
Really useful advice, thanks. I think choosing a name and then design for your blog is the biggest hurdle to overcome.
LikeLike
Hi what kind of dog is that? It’s just i’m looking for a dog :3
LikeLike
He’s a plain-old rescue mutt from the local animal shelter.
LikeLike
how cute this is!
LikeLike