To see a demo, visit this demo blog and click on the menu tabs:
![How to Add Different Backgrounds In Blogger Pages different background in each page](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6-wKK2x9ewnoJawi6HAw83y3t_sMYWCGtcqFwpKqLGxlapQwZ3Jhj3YbD7rahIgTUWgDiHwSLzScY-dO4ZYAiiM0SwrWMTQ-S0HGfgWgrrhUE1cupGT3piOqfNdQyfdW0QAUbesPCLMo3/s320/how+to+add+a+different+background+on+blogger+posts+pages.png)
Apply a Different Background in Blogger Posts/Pages
Step 1. Log in to your Blogger account, then go to "Template" and hit the "Edit HTML" button![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8npE4L_cbxDPLzLXlfhVPQnyMGv7oyhuO0MIhpraH342qxJuwHQ7kPAaGuQ892DfHLgfWs2px4MrZNNKAVKeCTte4e2L-DsCznu5rvY31nB4sBIv74pM95k83cPI9OtqwxQJ4Y2JiOmHl/s400/blogger-template-edit-html.png)
Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhchpBuriSBujQPdhKH-vxHnuv_JLP5X8yJAW1M7zmKxh2_Y04l-9BZyZLKElR_d5KMDfRQk1XmhBvoKcMQG2H3aGqxWxQTpwDEJ1pj_IKPGK4nM9yBPrWc-z3kDyWhZmYJCf_Lo2oqEugU/s1600/open-blogger-search-box-ctrl%252Bf.png)
Step 3. Type the tag below inside the search box and hit Enter to find it:
</head>Step 4. Just above the </head> tag, paste the following CSS style with the b:if conditional tags that will apply the style to the chosen page:
<b:if cond='data:blog.url == "http://address.com/page-name.html"'>
<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>
Custom Background in a Specific Page
- change http://address.com/page-name.html with the URL address of your blogger post or page where you want to apply the custom background. If you don't have a domain, your blog might be redirected to a country specific url; in this case, you may need to edit the blog address so that it ends with .com
- change http://DIRECT_LINK_TO_BACKGROUND_IMAGE.com/IMAGE.JPG with the direct link of the background image that you want to use.
No comments:
Post a Comment