Different Background on Different Page

If you have read my past few posts, you might have already guessed that I will be using conditional codes heavily in this tutorial. Anyway, you actually have different background on different pages. What you need to achieve this? Well, you must at least know how to change your regular main page background using CSS code. You see, there are many page templates and each of them have different ways to address to something, so you must at least do a little homework and try to change it first on the main page.

You can Checkout my test blog for a sample result. Link tab and Contact tab have different backgrounds:

http://yoboytestblog.blogspot.com/



Anyhow, you can try the following to see if your background can be changed using the following code:

From your Dashboard - Design - Page Elements - Advanced - Add CSS and paste the following code, see if your background is changing. 

body{
background: url('http://farm3.static.flickr.com/2604/3977045139_c00ae395ca_b.jpg') center;
}

(Remove this code after testing)

Step 1:

From your Dashboard - Design - Edit HTML - Find for </b:skin> - Place the following code below </b:skin>

<b:if cond='data:blog.url == &quot;http://yoboytestblog.blogspot.com/p/link.html&quot;'>
<style>
body{
background: url('http://farm3.static.flickr.com/2604/3977045139_c00ae395ca_b.jpg') center;
}
</style>
</b:if>

<b:if cond='data:blog.url == &quot;http://yoboytestblog.blogspot.com/p/contact.html&quot;'>
<style>
body{
background: url('http://themes.googleusercontent.com/image?id=1OACCYOE0-eoTRTfsBuX1NMN9nz599ufI1Jh0CggPFA_sK80AGkIr8pLtYRpNUKPmwtEa') center;
}
</style>
</b:if> 

To use this code in your blog, you gotta change the URL of the page that you want your background to be different, and the URL of the background itself. If you want 5 pages to have 5 different backgrounds, then you will 5 codes (in my example I only used 2). Where to get the URL of your pages? Go Dashboard - New Post - Edit Pages - View and there it is in your address bar. Can you change the background of a 'Virtual Page' like label page? You sure can, just put it's URL there.

Wow, this is a one step tutorial. Have fun.