Skip to main content

Different Page Background for Blogger Posts

 
Looking to give each of your Blogger posts a unique background image? You have come to the right place, all you need to do is check out the tutorial below, and if you have any questions feel free to ask in the comments.

First of all, click here to see this in action on a different post.

Step 1:
Upload the image that you would like to appear as the unique blog background to the particular post. Make sure you make any tweaks to the HTML ('Edit HTML') of the image in the post editor so it appears to your liking.

Step 2:
Following the image upload into the post, click 'Edit HTML'. In the code for the image find the 'div class' title (default is titled 'separator'). Change the title to something unique and make note of the title.

Step 3:
Once you have entered all of the content to your blog post, whatever it may be, click the 'Publish Post' button. Make sure you remember, or have made note of, the title of the 'div class'.

Step 4:
Now it is time to use some CSS (Cascading Style Sheets). Start off by selecting the 'Design' tab in Blogger. Now select the 'Template Designer' tab. Once the page loads select the 'Advanced' option and scroll to the bottom of the list until you reach the 'Add CSS' option.

Step 5:
Add the following CSS code to the 'Add CSS' page.

.DIV CLASS TITLE {
position:fixed;
left:0px;
top:0px;
z-index:-1
}

Change the 'DIV CLASS TITLE' text in the code to the unique 'div class' title of the image element in the post.
The 'fixed' in the code above will make the background image scroll with the page. You can also change the 'fixed' to 'relative' to take away the scroll with page effect.
Change the '0px' following both the 'left' and 'top' to position the image to your liking.
The 'z-index' number must be set as a negative (-) to create the background effect.

Step 6:
Save the changes when you are ready then continue to the post page to check it out. If it worked then congratulations. If you were not able to get it to work then comment below and I will answer your question.

Comments

Post a Comment

Popular posts from this blog

Batman: Arkham City "Pay Your Respects" Achievement/Trophy Guide

Get some help earning the "Pay Your Respect" achievement/trophy in Batman: Arkham City.  

Rewards1 Offer Walkthroughs (GPT Site Offer Guides)

 This is just a quick reminder, and probably introduction to most. I personally have created what I call an "Official Rewards1 Offer Walkthrough" page on this blog. Just click here to visit the page. On this page you can find a bunch of guides for Rewards1 Offers. Please keep in mind that these offer guides can be used with most GPT sites Most of the guides I have posted are to the high paying offers. For those of you who have not yet created an account and would like to start earning online you can do so by going to Rewards1.com and creating an account. Just click the "Sign-Up" button on the landing page, enter your information on the Sign Up page, and confirm your account through the email address you provided. Once you have confirmed you email, check back here and use our guides to get you earning some more money. In other News, please be so kind to visit our newest blog: Check out DLC4You for an in-depth DLC archive for PS3, Xbox 360, Wii, and more.

Gotham City Impostors Combines FPS with Superheroes

     How incredible is this? Gotham City Impostors appears to have all the elements of a classic First Person Shooter combined with all the fun and unpredictability of the the heroes and villains of Gotham City.      Basically, the entire plot of this game is "When Batman is away, Impostors will play." Their are two teams that are dedicated to battling out by all means necessary. The Batman impostors who dress up as closely as they can to the caped crusader, look completely unprofessional. They are not what you would expect Batman to look like, but that is the entire point of this game. On the other team lies the maniacal Joker impostors who make themselves useful by going on insane rants when the real Batman is busy.      Gotham City Impostors is an all multiplayer game and will be available for PS3, Xbox 360, and PC in  early 2012. This game will be download only, so if you are interested you might want to have a way...