How To Add A Background Image Behind Your Blogger Posts

| 13 comments

In this latest blog i will show you how to use an image in the background of your blog posts.This background image will only be behind the post area of your blog.

This is part 3 of 3 on adding background images to your blog recently i posted:

1.How To Use A Background Image For Your Blog

2.How To Add A Background Image To Your Blogger Sidebars

Be careful selecting an image to put behind your posts you don’t want an image that makes your blog hard to read.You can find images on image hosting websites like Photobucket.

Once you choose your image here’s how to add it to your blog:

1.Click ‘Layout’–>’Edit html’ For your blog

2.Find the following piece of code in your blogs html:
(Click’CTRL F’ on your keyboard for a search box to help find code)

#main-wrapper {

You will see ‘ #main-wrapper { ‘Followed by code similar to this :


#main-wrapper {
float: left;
width: 486px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

3.Now add the following code Directly Below ‘ #main-wrapper { ‘


background:url(PUT IMAGE URL HERE) repeat top right;
/* background-attachment: fixed; */

4.Replace the text ‘PUT IMAGE URL HERE’ above with the URL of your image.

We Are Nearly Finished :
If you need more help or have an opinion or suggestion Please leave a comment Below.This is a Do-Follow Blog.

Example:


#main-wrapper {
background:url(http://i941.photobucket.com/albums/ad259/spiceupyourblog/bloggerbackground.jpg) repeat top right;
/* background-attachment: fixed; */
float: left;
width: 486px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Once you have added the code click save and your finished adding the image.

What do you think ?

 

13 comments:

  1. Hey, thanks for using my image for ur tutorial..

    ReplyDelete

  2. Hi Cat,

    No prob thanks for the image its great!
    Got it in an image search think it suits the post perfectly.

    Paul.

    ReplyDelete

     

    Replies

     

  3. image is very impressive.. 🙂

    Delete

  4.  

  5. hey please help me. I don’t find any #main-wrapper { !
    Please can u tell me what should i do ? thank you !

    ReplyDelete

  6. Hi Karthik,

    I took a look at your template and with some custom templates the code is different.

    Back up your template and try looking for :
    #content{
    Use that instead of #main-wrapper.

    That should do the job, if not let me know and we will look into it more.

    Paul.

    ReplyDelete

  7. I can’t find it and I also can’t find #content… what can I do?

    ReplyDelete

  8. I can’t find #mainwrapper and #content either

    ReplyDelete

  9. this is where i want to change i think

    because i used the #fff2cc color for behind my posts in template designer .
    so,how can i change the color to be background image?

    ReplyDelete

  10. Can’t find main wrapper or content 😐 Help Please!

    ReplyDelete

  11. love ya <3

    ReplyDelete

  12. Hello, if u could assist , what if i want to limit background image on only a specific posting and not all postings. Tx in adv 😀

    ReplyDelete

  13. very nice

    ReplyDelete

  14. Thanks Alot, Exactly what I was looking for.

    ReplyDelete