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 ?


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

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
    1. image is very impressive.. :)

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

    ReplyDelete
  4. 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
  5. I can't find it and I also can't find #content... what can I do?

    ReplyDelete
  6. I can't find #mainwrapper and #content either

    ReplyDelete
  7. 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
  8. Can't find main wrapper or content :| Help Please!

    ReplyDelete
  9. 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 :D

    ReplyDelete
  10. Thanks Alot, Exactly what I was looking for.

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us