Different Backgrounds for Different Pages

Now that you can easily add multiple pages to your Blogger or Blogspot blog, you might have wondered if you can have a different background for each page, thus giving your pages their own unique look. Good news! You can! And this tutorial will show you how to do it in just one easy step. This tutorial was shared with me by Carolyn M. @ Pat Loves Carolyn. Thanks so much for the cool tip, Carolyn!! :)

{ demo }

See this tutorial in action on my Blogger Test Blog. Click on the Home and Recipes links up in the top navigation bar and see how they have different backgrounds! :)
Ready to try it yourself? First you’ll need pages on your blog. Here’s a super quick tutorial to get you all set up. It also includes tons of page ideas to get you started! :)
Next you’ll need a background. Here are my top 4 favorite free background sites:

Shabby Blogs
The Cutest Blog on the Block
Allie Brown’s Layouts
My Style Backgrounds

Or you can make your own personalized background using my tutorial right here! :)

{ tutorial }

From your Blogger Dashboard, click on Design, then Edit HTML. Look in that box of code and scroll down until you see </head>
(Quick Tip: Click CTRL-F to search for </head> to easily find it in all that code)
Just above that, copy and paste this:
<b:if cond='data:blog.url == &quot;http://YOURBLOG.blogspot.com/p/PAGE.html&quot;'>
<style>
body {
background-image: url(http://DIRECT_LINK_TO_BACKGROUND_IMAGE.com/IMAGE.JPG);background-position: center; background-repeat:repeat; background-attachment: fixed;
}
</style>
</b:if>
Two things to change:
1. http://YOURBLOG.blogspot.com/p/PAGE.html
Change this to your page’s link – the link to your new blog page where you want the custom background to appear. This is the address up at the top of the screen in the address bar.
2. http://DIRECT_LINK_TO_BACKGROUND_IMAGE.com/IMAGE.JPG
Change this to the link to your background image. If you are using Photobucket to host your background, it’s the Direct Link.
Click SAVE TEMPLATE and that’s it!! You’re done!!

Note: As always, be careful- one tiny little wrong space, quotation mark, or typo in the code can cause the whole thing not to work, so if it’s not working for you, double and triple check your work for typos! :) Make sure your code looks exactly like mine, except with your page and background links! :)
If you got it working on your blog, leave me a link! I’d love to see it! :)

Thanks for looking! :)