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
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
After, publish your post. That's all folks!
Note: Better apply this code at the bottom of your posts.
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>
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgklLZ5e0R_sq1khMay728J0y39vVR1eRoErV9Q25G0VWaLOKA8IrB7ZkVk1gutyBD9t2hdWvvJj8FqONgkBqKTFInhzxNWWJ-SxJ91IXLhrohT8h0SeqPts0LgFKM3sjJc4qqswHd-GRQ/s1600/vlcsnap-2012-07-31-20h16m18s252.png" imageanchor="1"><img alt="breanne durren" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgklLZ5e0R_sq1khMay728J0y39vVR1eRoErV9Q25G0VWaLOKA8IrB7ZkVk1gutyBD9t2hdWvvJj8FqONgkBqKTFInhzxNWWJ-SxJ91IXLhrohT8h0SeqPts0LgFKM3sjJc4qqswHd-GRQ/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">The image link should be replace with your own image link as shown on the example.
<img class="fade" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgklLZ5e0R_sq1khMay728J0y39vVR1eRoErV9Q25G0VWaLOKA8IrB7ZkVk1gutyBD9t2hdWvvJj8FqONgkBqKTFInhzxNWWJ-SxJ91IXLhrohT8h0SeqPts0LgFKM3sjJc4qqswHd-GRQ/s1600/vlcsnap-2012-07-31-20h16m18s252.png" />
</div>
After, publish your post. That's all folks!
Note: Better apply this code at the bottom of your posts.