Blogger Tutorial: 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!! :)

Blogger Tutorial: Different Background for Different Pages

{ 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;;'>
body {
background-image: url(;background-position: center; background-repeat:repeat; background-attachment: fixed;

Two things to change:


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.


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!!

Blogger Tutorial: Different Backgrounds for Different Pages

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! :)

See More Posts About: Blog Design


Southern Gal June 23, 2010 at 8:13 am

Yay! I’ve been waiting for a tutorial from you to help me get the blog page I want. Thanks so much. Now when I get the time…


Emily September 30, 2010 at 4:22 pm


Thank you so much for all your helpful tutorials. 2 weeks ago I knew NOTHING about blogging and got brave enough to start one. Check it out, Your blog has helped me so much! Thanks again.


Hannah June 23, 2010 at 8:20 am

That’s awesome! Is there any way to change the HTML of the different pages?


Hannah June 23, 2010 at 8:20 am

That’s awesome! Is there any way to change the HTML of the different pages? Maybe insert a style sheet or something?


Hannah June 23, 2010 at 8:21 am

Whoops. Double posting. Yikes. I click submit and realized I hadn’t finished my comment. Eep.

Amanda June 23, 2010 at 10:17 am

You can insert a stylesheet… In the code above, between <style> and </style> you can insert whatever CSS you want.

CSS Tutorial

I haven’t tested it out yet, but it’s working for the background. Let us know if you try it! :)

Hannah June 25, 2010 at 6:30 pm

So I tried out with the style, and got this message: “TEMPLATE ERROR: Unterminated string literal in [data:blog.url == “;] before 70 ”

It might be because I’m exhausted right now and accidentally did something funky to the code. Not sure…

Heather June 23, 2010 at 8:40 am

WOW!! What a great, new tutorial!! Thanks for sharing with us all :)


ali mehdi September 14, 2014 at 4:15 am

Great tutorial Kevin and Amanda! i like it alot.

Dorcas June 23, 2010 at 8:50 am

Your simply awesome AMANDA!!!! Thanks!


PatriciaD June 23, 2010 at 8:57 am

Wow, this looks great, I’m gonna see if I can get it to work for me on my blog. This is just too cool. THANK YOU!!


Kendra June 23, 2010 at 9:25 am

Thats AWESOME!!!!!Thanks!


Sheila June 23, 2010 at 9:27 am

Thanks Amanda .. just changed my background yesterday and was having problems. I figured it out. This would have been helpful then :)! Maybe this will help someone before they pull their hair out like me. This is my changed blog
So many possibilities these days on changing them.


Kyla June 23, 2010 at 10:01 am

I’m having problems — I was able to add my new pages but when I finished with the HTML it came up with an error code “div in the header” — hmmm … I’ll have to keep working on it.

Suzanna June 23, 2010 at 9:59 am

I got it to display on only my main page, but what I really want is to change each of my separate pages. Is there another tag I should be looking for in the html code? Thanks!


Tami June 23, 2010 at 12:39 pm

I wanted to do the same thing and just decided to experiment. I pasted the code Amanda gave us again right above and essentially repeated the tutorial, filling in the proper HTTP addresses. It seems to have worked…

Amanda June 23, 2010 at 12:53 pm

Awesome tip, Tami! :) Thanks so much for sharing. :) It looks great on your blog! I love how all the backgrounds coordinate. :)

Ann June 23, 2010 at 10:05 am

Thank you for posting this! I am new to the blogging world and my blog is SO bland.



Kindra Hill June 23, 2010 at 10:14 am

Hi Amanda,

Thank you for this tutorial. I do have a question, and I’m not sure if this is even possible, but worth asking anyway. On my blog I have the post separators and sidebar images and things like that. With a differant background on a new page those things don’t match. Is there a way to also change the post separators and sidebar images to match the current page background, or do I need to find backgrounds that would already match those things?

Any info you have would be great to learn. Thanks again!


Carolyn June 23, 2010 at 5:40 pm

I just described this in FULL DETAIL and it didn’t show up when I clicked on Submit Comment, but here’s a website that describes it well enough:

I hope my comment just took a while to process or something because it was so descriptive and detailed! :(

Amanda June 23, 2010 at 7:01 pm

Thanks so much for posting this Carolyn!! :) Sorry my blog ate your comment. :\

roundyrounds June 23, 2010 at 10:29 am

Wow, how do you express sincere gratitude via comment? You seriously are one amazing blogger and I thank you for the constant help you provide via your blog. Your fonts helped my fiance and I make our Save-the-Date postcards and now you are going to help me improve my blogging. Much love, Kristin


Anne June 23, 2010 at 10:31 am

I just added your badge to my blog… and there’s a way to get rid of the title! Courtesy of coffeeteaphotography… in the title area, just type in “”. And voila, no more title above the badge. Apparently there’s a glitch with blogger- when you want to add a gadget. Hope that helps!!!


Tami June 23, 2010 at 5:52 pm

Another tip: typing in the title space does the same thing. :)

Tami June 23, 2010 at 5:55 pm
Candace Mitchell June 23, 2010 at 10:39 am

I came here to ask about how my post separators, sidebar headers, and blog header won’t match, but I noticed Kindra asked. So, if you could please answer that, it would be greatly appreciated. Thanks, Amanda!! :)


Carolee June 23, 2010 at 10:53 am

Thats Awesome! I’ve been wondering for quite some time how to do that. Now I will start working on each of my girls pages. Is there a way to change the page elements? I was hoping to just have the sidebars mostly empty. Or at least different from the main page.


Debbie June 23, 2010 at 12:07 pm

Thank you sooo much for sharing. Exactly what I’ve been looking for. thank you, thank you, thank you!


Jenna June 23, 2010 at 1:26 pm

Yikes! It’s not working on mine. I’ve tried it like five times and it’s giving an error at the top of my blog after I save it and look at it. I don’t know what I’m doing wrong?


Jessica June 23, 2010 at 3:00 pm

:( It won’t work on mine either. I never have trouble with these when I follow the directions. This is the first time and I’ve tried like three times.


Jessica June 23, 2010 at 3:02 pm

Mine doesn’t show an error, though. It just looks like it always did. (p.s. don’t mind my unmatching blog. I’m in the process of revamping)

Carolyn Gallo June 23, 2010 at 6:39 pm

thank you SO MUCH for this. it’s helpful info like this that keeps me coming back to visit your blog! :c )


ainjhel~DBSK June 23, 2010 at 7:03 pm

is it also possible to change the header of the page??
hope u can answer my question n___n

BTW.. reaaallllyyyyy nice website!! i visit this a lot and use the fonts~ =)

have a great day!


Diana June 23, 2010 at 7:32 pm

Great tutorial! Will come in handy for those of us who like different looks. Maybe with more than one background image in use, it wouldn’t be necessary to change main page too often. =)


alayne June 23, 2010 at 10:05 pm

Thanks for the great tutorial! Is there a way to change the header on each page? I would love to know how to do that :) Thanks!


Stephanie June 24, 2010 at 3:05 pm

What blogging software do you use? Can you work offline then submit the post?


amanda g. June 24, 2010 at 3:31 pm

Fab-O! I changed the cat and dog picture pages! Love it!!!


Amber June 24, 2010 at 4:13 pm

Amanda…just wondering if it’s possible to change the font for these new page links? I followed your tutorial a while back to change the fonts for the sidebar, dates, & post titles, and would LOVE to change these links as well…if possible!



Amanda June 24, 2010 at 8:51 pm

Amber, yes, the page links can be changed to a custom font, but it doesn’t really look right, especially if the page title is longer. It breaks up the title so that it’s not all one one line. Here’s an example:

It’ll even break it up in the middle of a word.

Larissa Sibiglia July 9, 2010 at 2:02 am

How do you change the fonts on the separate pages? DO happen to have a tutorial. Then again I cannot even get the backgrounds to work on the new pages…I am ready to pull out my hair…any help you could give would be great.


Seri June 24, 2010 at 9:21 pm

Hi Amanda,

I want to know how to centered the tab menu like yours and add image to it.. tq


Taylor Stone June 25, 2010 at 10:38 am

Wow, I found your blog through Journey of the incessant dieter and I am so glad I did. I can really put this information to work.
Thanks so much for the post.


Marla June 25, 2010 at 12:58 pm

Wow! That’s awesome! Thanks for sharing. I’m off to try it! :)


Marla June 25, 2010 at 1:16 pm

Back to report that it works like a charm! Thanks!!!! :)


amy g. June 25, 2010 at 9:03 pm

I have it working on my blog!! Can I just tell you how much I love your blog?! Like love, love, love, would marry it if it would have me, love. Thanks for the great tutorials. You’re awesome!!

Thanks again!!


Deb June 27, 2010 at 9:17 am

Hi Amanda,

I am unable to make it work. Would you please kindly advice me?



Lee Ann June 28, 2010 at 9:40 am

Thank you so much for this wonderful information and tutorial. I’ve been thinking about adding new pages but didn’t know how.

Lee Ann


Cara June 28, 2010 at 10:10 am

Hmm… I followed the directions & my pages still look the same. Stink. I even went back through & compared my html to your html. I am new to this though, so I have a feeling I did something wrong.


Tami June 28, 2010 at 6:07 pm

Whew hooo! I did it and it worked. Thank you so much for the tutorial. My name is linked up to my blog if you’d like to check it out!

I also used your tutorial to change the font on my titles on this blog and my Food Art blog.


Cara B. June 28, 2010 at 11:11 pm

Hmm, I have no idea what I’m doing wrong! I’ve tried this at least ten times and so far no dice.


Kate June 29, 2010 at 1:26 pm

Thanks so much for the tutorial!! Please help though, the link to the tutorial for adding pages to your blog will not work. I click on it and it just comes up blank. I am really interested in adding pages, but can’t figure it out. I figured out how to change my background, but now I’m ready to add pages. Your help would be much appreciated!! Thanks so much!!!


Kelly July 2, 2010 at 2:32 pm

Thanks Amanda! I can’t imagine how much time you spend trying to help all us poor confused people out :) I’d like to second, or quadruple the question about the header for different pages. The header for my main page doesn’t match the background I selected for my additional page, so it looks funky unless I can change the header. Thanks Amanda for you help!


Kelly July 2, 2010 at 2:49 pm

The problem really is that the top part of the background from my home page remains at the top of my new page, on either side of my header, then the new background starts a few inches down, so it’s ugly. Check it out:

(it’s a “newborn blog,” as I’d like to call it)

Kelly July 3, 2010 at 1:05 pm

Got it worked out through carolyn’s post!

Julie Wiens July 5, 2010 at 10:25 am

This is perfect! I have been kicking around the idea of starting my own blog and when I found your handwriting to fonts section, it lead me straight to this tutorial! Awesome luck. Thanks so much,


Ashley July 5, 2010 at 4:01 pm

Hi Amanda! I love your blog! I used your tutorials to have cute post titles and a signature. I also used your fonts to create a header. I was going to purchase a custom blog design, but your way was much cheaper! Thanks for the help! I would love for you to check it out!


meagan July 13, 2010 at 2:25 pm

Great tutorial Amanda
Is there a way to change the header for that page as well?


Lacey July 14, 2010 at 1:29 am

Thanks for the great tutorials Amanda! i have fallen in love with your blog after stumbling upon your fonts and after “following” you for over a year now i have decided to create my own. i was just wondering what websites you use for blog tutorials because my blog needs a little bit of work. thank you so much for adding all of this helpful info!


ImAprilE August 1, 2010 at 2:57 pm

Hi Amanda! I love your blog, as always, but this isn’t working on my new blogger blog. (I just moved from to Blogger) It “flashes” the new, correct background but then changes over to the main background. Any help?

Thank you so much, always!



Dagmar December 4, 2011 at 4:12 am

Hi Amanda, I have the very same issue…
I did add some quotationmarks around the url for the backgroundimage, and now at least it flashes the new background… but I would love to get it to stay :o)
Awesome blog btw!!!

Jessica August 3, 2010 at 5:25 pm

This is very cool! I’ve been looking for a way to have a different header for each page on a Blogger blog for some time. I believe tweaking this code a bit would do the trick! Thanks for sharing!


Laura August 16, 2010 at 3:19 pm

I tried this on both of my blogs, and did it word for word, but it didn’t work on either of them.
It saves perfectly fine, but when I click on the page that’s supposed to have the different background, it looks the same as before.


Julie September 2, 2010 at 7:35 pm

I love this tutorial, but I can’t get it to work!! :( I even put my .jpg in my photobucket account!! :(


Kristin September 8, 2010 at 11:33 am

Amanda thanks for all your helpful posts! I love your blog and look forward to reading what you write next!!


Amanda September 10, 2010 at 8:26 pm

Hi. I am SO frustrated. I have spent hours trying to follow all the steps to improve my blog, which I need for business, but I can’t seem to get it right! I don’t know if it’s because I’m on a mac, although I would assume you are too. Is it possible to hire you to help tweak my site? Please let me know. I LOVE LOVE your work! All the best, Amanda


SaySay September 11, 2010 at 8:06 am

Does the background image must be in .jpg ?


baby cute October 17, 2010 at 1:31 pm

Hi..amanda, i try your tutorial but not working..please help me..

thank you.


E-Na November 1, 2010 at 10:59 pm

Amanda, thank you so much for all your tutorials, especially on this. THANK YOU FOR SHARING!!

But I do have a question: I have lot’s of gadgets and buttons on my blog – is there a way to remove those on the pages that I make up without losing them from my “home” page? I would appreciate all the help that you can give.


E-Na November 1, 2010 at 11:11 pm

Hi…it’s me again.. :)
I added a page named photo albums but I don’t really know how to organized my photo on that page. Could you please do a tutorial on how to click on the page and then have multiple thumbnails with different photo albums to choose from? I am sure this is possible because I have seen it on your beautiful blog!
I would greatly appreciate your help!Any info you have would be great to learn.



Glenys November 27, 2010 at 3:39 am

My totally worked. I wanted one that scroll together with the content so I change background-attachment:fixed to :scroll. I did this for my blog pages but not the main page. Thanks a lot, Amanda!


Carlos Alberto Andres December 10, 2010 at 3:33 pm

Hello!! Does anybody know how to post on different pages??
Everytime I post everything only goes to he main page… Is there a way to post on an especific page????


Flavia January 28, 2011 at 1:55 pm

Hi, you have to go to posting/edit pages/choose your page/write your post. Hope this helps!

Christine December 30, 2010 at 10:43 am

Love this tutorial! I just used some hex color codes to change the background color on each page! Thank you so much!


Elyssa B. January 1, 2011 at 11:53 am

I love your tutorials Amanda…they’re always SOOOO easy to follow! However, I’m having trouble with my blog. I’ve posted that code in there twice because the first time it didn’t catch. I figured I probably typed something wrong…but I didn’t. The second time the code didn’t work either. Can you help??


Lisa January 6, 2011 at 12:39 pm

Ok I tried it a lot of times now… It won’t work for me. It doesn’t show any errors, it just looks like the “home” page… :( What could be the mistake?


Tracy January 9, 2011 at 6:13 am

Thank you so much for this tutorial! It worked beautifully first go and I added in header code to give each page a different header.

Check it out at:

You are so helpful! I’m loving your blog so much!


Elyssa B. January 16, 2011 at 5:07 pm

Hey Tracy! I was just wondering…how did you manage to give each page a different header? I’d love to do that for my blog’s pages as well, since each page is totally unrelated! Thanks for sharing!

Elise January 10, 2011 at 10:32 pm

I’ve been following your blog for quite some time now and I just love the way you have it designed! It’s inspired mine!:)


MAL February 2, 2011 at 1:02 am

OK, I’m not sure WHAT I’m doing wrong…but I think it may be the background code…

When I go to replace my background code I notice that mine is several lines longer of code than your photobucket one. Am I misunderstanding? Thanks, and I’ll keep trying!!


Akudosochim April 19, 2011 at 4:05 am

Thank you so much, it works well and looks so good

check it out

My blog is new, so if you have any more ideas, lemme know please. Thanks


Kelsie April 19, 2011 at 7:36 pm

Hello there,

I have tried to change one of my blog pages to a different background but when it comes to the 2 things to change I can’t quite figure out what to do with the link. It might sound funny but it just doesn’t all make perfect sense. If you could help me out here that would be great other wise thanks anyway. It really is a great tutorial and all yours have been very helpful so far but for some reason I just can’t work it out.

Thanks so much for your time.


Michelle May 1, 2011 at 12:56 am

Help!!! I have added pages to my blog, but can’t work out how to put anything on them! I am pretty clueless when it comes to this sort of thing and would appreciate any help you can give me! TIA


Donna June 11, 2011 at 6:58 pm

Thank you for sharing your expertise with us. You make it sound so easy. I’ve been working on my blog for two years and just haven’t been able to get it off the ground. I’m going to work really hard this next week to get this done and done right! Hope it’s as easy as you seem to make it!

Many blessings, Donna


Callie June 23, 2011 at 6:48 pm

Hi Amanda!
Thanks for all of the wonderful tutorials. I was wondering…I’m doing my blog in wordpress instead of blogger. Do you have any recommendations for sites that have helped with wordpress? Thanks! Callie


joie August 1, 2011 at 4:55 am

hello there. your site is amazing and I learned a lot about blogging. Another request please. can you make a tutorial on how to make a fancy button in the horizontal menu (pages). Uhhh,, i cant explain it clearly but I hope you get my point. (sorry I’m really new in blogging)



Full Figured Fashionistas October 13, 2011 at 6:37 pm

Thank you sooo much for sharing this tutorial, Amanda. Worked perfectly on my site! Between you and I have been able to completely transform the look of my site. Gotta love bloggers who share their knowledge. Will definitely spread the word. :)


Elena October 19, 2011 at 10:48 pm

Hi Amanda,
Do you happen to know if there’s a way to customize the tab fonts?


Full Figured Fashionistas October 20, 2011 at 3:29 pm

Thank you sooo much for sharing this tutorial, Amanda. Worked perfectly on my site! Between you and I have been able to completely transform the look of my site. Gotta love bloggers who share their knowledge. Will definitely spread the word. :)

Edited to add:

Any way to get the newly installed backgrounds to show up on post pages too? Your tutorial worked perfectly on my static pages, but would love to have my background show up on each of my post pages too. Any ideas? Thank you in advance if you can assist.


Kay October 30, 2011 at 12:43 pm

Thank you so much for this posting!! I just ran into it myself and used it. I also shared your link with my readers (few they are) and shared this helpful tip. I won’t show till a few Techy Tuesdays from now. Kay’s Korner


Dagmar December 7, 2011 at 5:44 am

Just wanted to let you know, that I used this cool tutorial to creat a different abckground for each of my pages here:
Thanks for your valuable help!!



Matt Morales December 11, 2011 at 5:51 am

wow! dude..thanks for doing this..i got an idea on changing my background depends on label..can u help me? :P


Bea May 28, 2013 at 4:58 pm

Yesssss I need this! Please help. A different background for each different label!

Shahrul Niza December 28, 2011 at 1:20 am

Hi Amands & Kevin,

I tried the tutorial but somehow it didn’t work. I kept seeing the HOME header picture for my other pages headers. I like to display different header image for different page. Right now I can’t figure it out but I’ll keep trying.
Anyhow, I’m glad that I’m able to use your cool fonts on the header! Thank you. So, that is great.
I was also able to add Amanda & Kevin button on my blog. Finally. You’re welcome to visit my new blog. You RULE.


Aundrea March 27, 2012 at 10:31 am

Can you please help? I have tried this several times, but can’t seem to get it right. I always get the following error message:

Error parsing XML, line 5, column 2: The content of elements must consist of well-formed character data or markup.

I’m new to blogging, and know nothing about code, so I don’t even know the first thing about fixing that error. What does that mean and how do I fix it?


Iris April 6, 2012 at 7:48 am

I have been playing around with my blog and haven’t had a problem yet. I’ve been trying these steps on my “extra-blog” just in case but it doesn’t work. :( I’ve looked up different tutorials and they all say the same thing and it just doesn’t work. I do not find the word only */Header… what do I do? I copied and pasted and changed everything above */Header but I only have all those words above my header. I don’t understand… Maybe you can help.


Jamie June 10, 2012 at 11:23 pm

I’m having a problem. My background will show up on my page when it first loads but then the backgroung from the home page covers it. How can I fix that? thanks so much!


Joanne J-K June 29, 2012 at 6:31 am

I have a question regarding the code you provided. I chose a background for my static page from shabby blogs, one of the sites you referenced above. Shabby blogs provides code for the background not just a direct link to the image. How do you incorporate the code they provide to add a background to a static page? Thanks for your assistance.


Diya April 18, 2013 at 2:53 pm

That’s incredible! Thanks a lot! I’ve been searching for this since last year.


Paul May 13, 2013 at 11:22 am

how do you change the position of the image? Perhaps I do not want it centered? thank you


Bea May 28, 2013 at 4:55 pm

Hiya, does this work for other links, like for example links to a certain label? So for example a page that says “Showing posts with label cupcakes”? This link would look like this: I want to have a different background for each different label, and I have about six which I have linked in my sidebar. I’ve tried this code with the label page link but it didn’t work. Why is this?


Jessibeth July 3, 2013 at 12:22 am

Hi, can this be done with headers, change it with each post? (I’m using blogger) Thanks!


Morgan October 29, 2014 at 4:50 pm

Hello! I am wondering if their is a reason why I cannot seem to get my backgrounds to change for each of my pages. I found some cute ones I wanted to use from shabby blogs, but I cant seem to figure out the problem. I am wondering if its because I am not supposed to be copying url of the background image from their site?? I also uploaded it to my google pictures and tried copying the background images url from their… nothing. Is the direct link you mention using not this url I have been trying to use? Very confused. Thanks.


sonali December 3, 2014 at 10:16 pm

I just love to design new new blogs that’s why i love your tutorial .Your different background tutorial is really awesome will try it.One more tutorial i’m expecting from your side that is” Favicon”. I tried many times but it dosen’t work .Please make me learn.
Have a Nice Day ……


Leave a Comment