15 minutes to a prettier blog: ‘fix’ the background

You  know when you’re on a blog and you’re reading (or likely, skimming) along and something starts distracting you as you scroll down, down, down, and you know its not the text because its big enough to read and you know its not the sidebar because all the images and buttons are aligned (that’s a whole other topic…) and you just can’t put your finger on it but you know something’s weird?

{big inhale.}

You’re probably experiencing the “un-fixed” background pattern phenomenon. Unfixed, as in not fixed. Not unfixed as in broken. Its especially evident with very busy background patterns. Its hard to describe in words, so let me demonstrate interactively…

Take a look at my two examples in the links below. Notice the background pattern as you scroll down the blog (albeit a hideously ugly color and pattern…).

Example 1: {UNFIXED}

Notice that the pattern moves with the blog content. This movement distracts the eye, making it harder to concentrate on the content in the main column.

Now take a look at a fixed background…

Example 2: {FIXED}

A little more pleasant, don’t you think? Its a subtle difference, but it makes a positive impact. You want your content to captivate your readers and make scrolling through your blog a pleasant experience for them.

So how do you fix it, you ask? Well there are a few ways depending on your blog platform, theme, etc. But here’s the basic gist:

For WordPress:

Sometimes this is an option in your theme where you can simply select a checkbox to keep the background fixed, as in the Twenty Eleven theme. Or, it may ask if you want the background to “Scroll” with the page, in which case you would not select that option, therefor making it fixed. That would most likely be found under Appearance>Themes>Options. But if you don’t have it so simple, its actually not hard to add this detail. Simply…

Go to Appearance>Editor. Navigate to the “style.css” file from the right hand side of the page, down near the bottom.

Search for a tag that looks something like this…

body  {
     background: #f7f7f7 url(“http://www.yourblog.com/wp-content/…/bg.jpg”) repeat;
     font-size: 86%;
     line-height: 1.8;
     color: #423019;
     }

Add this line somewhere in that tag:

background-attachment: fixed;

So, the whole thing should look like this:

body  {
     background: #f7f7f7 url(“http://www.yourblog.com/wp-content/…/bg.jpg”) repeat;
     background-attachment:fixed;
     font-size: 86%;
     line-height: 1.8;
     color: #423019;
     }

Click Save.

For Blogger:

Its even easier in Blogger (assuming you are using the latest version and the “Template Designer”):

Go to Template>Customize to get to the Template Designer.

Click the “Advanced” link on the upper left, then “Add CSS” (scroll down a little) on the list that comes up just to the right).

Paste this code in the window:

body, .body-fauxcolumn-outer .cap-top {
  background-attachment:fixed;
}

This should work with your own image or one from the Blogger selection.

Click “Apply to Blog” and you’re done.

For other platforms:

Its going to be the same story for other platforms such as Typepad, SquareSpace, Tumblr…find where the CSS is kept and add or modify the code as I mentioned above. Have a specific question about your platform? Please ask and I’ll try to help you!

That took under 15 minutes, didn’t it? Now you many not get raving comments saying “Oh, your blog is 10,000 times more pleasant to read…thank you for adding the background-attachment CSS property!”. But you and I will both know your readers will be happy you did.

This post is sponsored by PSPrint.com…Check out these ten amazing photo blogs to feed your creativity and inspiration.