Friday, May 11, 2007

How to add background picture to the sidebar

A blog reader asked about how to add background picture to the sidebar. This can be done. The first thing you need to do is to upload the picture to the Web, perhaps using the method outlined in this post Getting New Blogger to host the photo for your profile, sidebar, Header, etc. (click BACK button to get back to this page) or use a photo host like Photobucket

What you need to do to to sign into Dashboard, click LAYOUT, then click EDIT HTML and look for this block of codes:

#sidebar-wrapper {
width: 150px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
background:
}

Type this into the block of codes:
url(photo URL);

#sidebar-wrapper {
width: 150px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
background: url(photo URL);
}

You can see the result here: Dummies Test Blog. The links and wordings are a bit hard to see though because of the color. I probably have to choose another photo to demonstrate.

8 comments:

  1. interesting and a good tip

    ReplyDelete
  2. Thanks, But is there a way to add a picture as your entire blogger background. like you did for the sidebar?

    ReplyDelete
  3. Hi jahaute,

    Please refer to Add picture background to your blog. I checked the post and the example blog, but I think I need to make my own example blog.

    Anyway, you must have am image with colors that will allow your text, etc to display further. Also graphics can make a page load slower and if visitors find a page taking too long to load they will just surf away. That is why I don't have much graphic in my main blogs.

    Peter (Blog*Star 2006 and 2007)
    Blogger for Dummies

    ReplyDelete
  4. hi...but is there a way to put a background photo for the sidebar like this?

    http://brigeston.blogspot.com/

    ReplyDelete
  5. Peter,

    thank you very much for your answer!:-)Could you help me one more time? I understood everything but I don´t have any code like this in my blog HTML -> #sidebar-wrapper {
    width: 150px;
    float: right;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    background:
    }
    I just tried to add it to the HTML but it doesn´t work out. What could I do now? :-S

    ReplyDelete
  6. Try this:

    /* Columns
    ----------------------------------------------- */
    .main-outer {
    border-top: 0px solid #111111;
    }
    .fauxcolumn-left-outer .fauxcolumn-inner {
    border-right: 3px dotted #111111;
    }
    .fauxcolumn-right-outer .fauxcolumn-inner {
    border-left: 3px dotted #111111;
    }
    /* Headings
    ----------------------------------------------- */

    ReplyDelete
  7. hi..how to change the backround??can tell me the web??i just need web..thx for the help..

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics