Sunday, March 30, 2008

Background graphic for blog


I would be very careful with adding a graphic background to a blog as the photo must be selected carefully, otherwise, something on the blog become very hard to read or may even become invisible. Anyway look at blog with repeating graphic background.

Instructions on how to add a repeating graphic background to a blog

I would first assume you have a graphic or photo that will suit color of the text, hyperlinks, etc. Save it into your computer into a folder where it can be easily found. Now you have a choice of the free Photobucket image host or hosting it by uploading to a post in Blogger. In my case, I have chosen to host the photo at photo of clouds for blog background.

The very first thing you need to do is to get the correct photo URL. In that post, I will click View > Page source (the language may differ a little in different web browsers) in the menu bar at the top of the web browser:

Flock social web browser View Pagesource

Since the title of the post is "Photo of clouds for blog background", I will press ctrl+F and a search box will appear. I copy-paste all or part of the above post title and click "Find Next" to get to the section of the Page Source where the scripts to display the post is. I found:

<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://2.bp.blogspot.com/_jizoPL28qCY/R-9sfS_bZdI/AAAAAAAABWw/fmU-eq17I5M/s400/cloud+ktratboy+cropped.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5183480981056349650" />


and after src=" I found the URL of the photo:

http://2.bp.blogspot.com/_jizoPL28qCY/R-9sfS_bZdI/AAAAAAAABWw/fmU-eq17I5M/s400/cloud+ktratboy+cropped.jpg


I then go back to blog with repeating graphic background (this is best done in a different tab of a web browser while signed into Blogger like FireFox with tabbed browsing. At the top of that blog, you will see the navbar with your email address, "New Post", "Customize", "Sign out".



Clicking on "Customize will take you to the LAYOUT. Click EDIT HTML and that will open the template editor window. Look for

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}



and somewhere after {body

create some space for the script to add the graphic background which should be

background-image:
url('http://2.bp.blogspot.com/_jizoPL28qCY/R-9sfS_bZdI/AAAAAAAABWw/fmU-eq17I5M/s400/cloud+ktratboy+cropped.jpg');
background-repeat: repeat


and then that part of the template will become

body {
background:$bgcolor;

background-image:
url('http://2.bp.blogspot.com/_jizoPL28qCY/R-9sfS_bZdI/AAAAAAAABWw/fmU-eq17I5M/s400/cloud+ktratboy+cropped.jpg');
background-repeat: repeat

margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}



Peter Chen's nice graphic signature

9 comments:

  1. Hi Peter,
    I have managed to put an image as the background but the image is now split into two; there is a separation on the right hand side, seems like a divider between main content to a side menu but I didn't modify the codes to get a side menu at all. I think it could be the 3-column template issue but I could not find the code to remove it. Can you advise how to resolve this?

    ReplyDelete
  2. Hi Peter Good Post,

    But I can't find the place you mentioned. The only think close to that was this: /
    body {
    margin-top: 0px;
    margin-$endSide: 0px;
    margin-bottom: 0px;
    margin-$startSide: 0px;
    background:#123 url("http://www.blogblog.com/dots_dark/bg_minidots.gif");
    background-position: 50% 31px;
    text-align:center;
    font:x-small Verdana, Arial, Sans-serif;
    color:$textcolor;
    font-size/* */:/**/small;
    font-size: /**/small;
    }

    and also how come when I tried your example it didn't work?

    confused blogger,
    tpan

    ReplyDelete
  3. Peter,
    This does not work.

    ReplyDelete
  4. This isn't working for me. It's not changing a thing.

    ReplyDelete
  5. I actually just got this to work. Thanks!

    ReplyDelete
  6. thx. but how i put an image 660x800 on center without repeat?

    ReplyDelete
  7. I was able to make this blog background change, and it looks as it should on Firefox (my usual browser). But when I look at my blog in IE or MSN, the background doesn't show...just blank.
    Why does it look different in different browsers?
    How can I fix it?

    My blog-the part that's missing is the patterned background:

    http://photographybysylviacook.blogspot.com/

    ReplyDelete
  8. Peter, thank you for your time. I was able to get a background image set up with your kind instructions.

    ReplyDelete
  9. Hi. This post is likeable and your blog is very interesting, congratulations!!

    Regards,
    clipping path

    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