Different Background Image on Post

Before anything else, here's the demo.


This is inspired by this theme 

You will have an option to change your background image in every post and having it in full width depending on the screen size. This "trick" will override your body background but it's not harmful, I promise! :D
So, let's start doing it.

From Dashboard > Template > Edit HTML

First, find  ]]></b:skin>

Then paste this code above it,


again, find </head> then paste the code below, just above it



then Save it!

When posting, upload the image you want as a background. and get the image link, like this

<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-gkNAVn2xKpw/UBpe4PKJeAI/AAAAAAAACno/I61-n4gSeVY/s1600/vlcsnap-2012-07-31-20h16m18s252.png" imageanchor="1"><img alt="breanne durren" border="0" src="http://4.bp.blogspot.com/-gkNAVn2xKpw/UBpe4PKJeAI/AAAAAAAACno/I61-n4gSeVY/s1600/vlcsnap-2012-07-31-20h16m18s252.png" title="breanne durren" /></a></div>

the highlighted text is the image link as you upload it here in Blogger. Copy the link then after delete that code.

Then, use this line of code

<div class="bg">
<img class="fade" src="http://4.bp.blogspot.com/-gkNAVn2xKpw/UBpe4PKJeAI/AAAAAAAACno/I61-n4gSeVY/s1600/vlcsnap-2012-07-31-20h16m18s252.png" />
</div>
 The image link should be replace with your own image link as shown on the example.

After, publish your post. That's all folks!

Note: Better apply this code at the bottom of your posts.

Popular posts from this blog

Add/Subtract Single Digit Number in Assembly Language

Set table width to 100% on PDF export in Datatables

Hot/Cute flat-chested Girls