diy blog design: adding a unique background

studio waterstone
But first…
I think Oreo is happy her mom (or mom’s shoe) is back from vacation.


If it weren’t for the handbags, I’d be designing graphics, blogs, and websites – maybe only for myself, but hey. It’s my part-time obsession. With that in mind, I hope you can use this tip to add some creative uniqueness to your own blog.

Adding a Unique Background Pattern:

1) First, find a beautiful pattern using, squidfingers, or simply Google “background patterns”. Download your chosen pattern then upload it to a server such as Photobucket.

2) In another window or tab, go to your blog dashboard, then click on Design, then Edit HTML. To be safe, click on “Download Full Template” just in case (although you’ll be fine. this is easy peasy stuff).

3) Time to look at the HTML in “Edit Template”. Scroll down (past the CSS styling) until you see this code:

body {
background: $bodybgColor;

text-align: center;

color: $textColor;

font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;

4) See the highlighted red area? Copy and paste this section to Word or TextEdit (just in case you don’t like your new design).

5) Next, you will want to replace the red section with: background: url(Direct Code);

6) Go back to Photobucket and pull up your uploaded background pattern.

studio waterstone

7) The picture above says to click on the direct link. You do NOT click on the box. Actually click on the words “direct link” and it will copy the code.

8) Go back to blogger and paste that code into the Green Direct Code section.

Now it should look something like this:

body {
background: url(;

text-align: center;

color: $textColor;

font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;

9) Click the “Preview” button to see how it looks. If you’re happy with the results, click Save and you are done. Enjoy your new background.

Questions? Feel free to fire away and I’ll do my bestest to help.

*UPDATE* Galit from The Slow Noodle provided another easy way to change your background image! This process can be used if you have one of the standard Blogger templates. Check out my comment section for her instructions.

My blog uses another template that will not allow this type of alteration so I am able to actually change the html effectively – something you can use anywhere that gives you access to html. So, no matter which blog platform, template, or non-template you use, we’ve got you covered! Thanks Galit!

Posted in tutorials.


  1. I love the new layout and background!! So clean and easy on the eyes. Make me feel fresh and relaxed!

    There is another option for uploading the background that doesn't involve touching the blog's code,might be easier to some people so I'm adding it here:
    On your blog's dashboard click the Design tab.
    Click the Template Designer. Choose Background from the 4 options.
    You will get on the left a box showing the current background. Open it. If you have the file with your pattern/background, choose Upload Image.
    You're almost done. You can choose how to place your image, if it should scroll with your page, tiled etc.
    After changing to the way you want it to look (you see the preview below), click ok. Voilà!

    Not sure which one is easier, Wrote it just in case it can help someone.

  2. That is FANTASTIC! I knew that you could change standard blog templates, but I use a different template. I'll have to check to see if it can be done. Thank you.

  3. Ima bookmark this page to make return visits in the fall when I update me blog. You da' bomb. (But you knew that!)

  4. Oh this picture is sooooo lovely!
    wish you a happy and creative day today. sunny greetings from germany, geisslein

  5. Thanks for posting these links, I have just found the pattern used on my wedding stationery site so I can make some business cards – yay!

  6. Love the header and the layout, looks great! The photo of Oreo snuggled with your sandal is priceless! Thanks for the handy html tips too 🙂

  7. This is great but I really can't get past the cat hugging the shoe – did you skip through fields of catnip??? LOL!

Comments are closed.