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.

 Not too hard, huh?

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. This post contains affiliate links.

istock

Related Posts with Thumbnails

Comments

    • Hi Stephanie,

      Did you try adding this to the CSS in the Template Designer?

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

      If you want to send me your URL I might be able to take a quick peak. You can email directly at nicole@thepixelboutique.com.

  1. I tried this with Blogger and the template designer and it didn’t work for me either. I copied the thing you posted to the Add CSS in the advanced tab and it didn’t take. I tried like 3 times. Do you know anything else I can do?

    • Hi Erica,

      Looks like it worked? Im seeing a fixed background at your blog currently. If not, let me know and I’ll see if I can help!

      • So after I posted that comment, I actually googled how to create a fixed background in Blogger and found where I could change the HTML on my blog to have a fixed background. That’s how I was able to get it to work. :-) I didn’t realize you could change the HTML until I looked it up yesterday! Thank you for your help and checking out my blog!

  2. Thank you! This worked perfectly in the Blogger simple template. I just pasted the CSS in the Add CSS tool, as instructed, and it worked great. Thanks again! :)

    • Well… it’s not working for me anymore either. I’m not sure why. It works while I’m in the template designer, but as soon as I go “back to blogger” and then click on view blog, it is scrolling again. I’m not sure what to do differently. I’ve deleted everything and started with a fresh template twice, and get the same results. Everything looks great while I’m in template designer (even after applying the changes and viewing it in the browser), but as soon as I exit the template designer, it forgets, even though the code is still there. I don’t get it. Sigh…

  3. Thank you so much! I have been searching the internet for the last several hours trying to figure out how to make my blog’s background stop scrolling and you helped me do it is under 10 seconds!

  4. I just want to say thanks on the help to make the background fixed. I already had tried [background-attachment:fixed;] on the CSS box and that didn’t do it, so I knew I was missing something framework specific. Thanks a lot !! Worked perfectly. :)

  5. IT WORKS! I just had to add an empty line above the code (in blogger) in order for it to work. So cool! :D Thanks a mil <3

  6. Thank you so much for this! Would you believe, I didn’t even know there were that many options in the template designer – all this time, I thought “date header” was the last option under the “Advanced” tab. Fail! LOL

  7. I tried this, and it works beautifully in my browsers on the computers, but not on mobile browsers :/ it still scrolls on both tablet and phone (viewing both web and mobile versions). I actually knew how to do this and had done so ages ago, but was searching for a solution to make it look right on all browsers. Wonder how I’ll manage…!

      • Hi Amanda! Yes, mobile themes can be tricky. But in your CSS file, you might try this:

        @media only screen and (max-device-width: 480px) {
        body, .body-fauxcolumn-outer .cap-top {
        background-attachment:fixed;
        }}

        @media only screen and (max-device-width: 480px) {
        body, .body-fauxcolumn-outer .cap-top {
        background-attachment:fixed;
        }}

        @media only screen and (min-device-width: 768px)
        and (max-device-width: 1024px) {
        body, .body-fauxcolumn-outer .cap-top {
        background-attachment:fixed;
        }}

        @media only screen
        and (min-device-width: 768px)
        and (max-device-width: 1024px)
        and (-webkit-min-device-pixel-ratio: 1) {
        body, .body-fauxcolumn-outer .cap-top {
        background-attachment:fixed;
        }}

        It may not work but its worth a try!

Leave a Reply

CommentLuv badge