Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Mar 24, 2007

Digg This Story

Background Image for Blogger Template

With this guide, you would be able to add a background image or picture to your Blog, customize the position of your image, and have a static background image that stays in place when you scroll through the contents of your blog.

You will need to create an image. Find a picture you like. If you need a free photo editing tool, you can either search the net for one or use Google's Photo Editing Software Picasa. You can also use a small tile-size image which can be repeated so as to cover the entire page. Try not to have an image file that is too large as your page may take a little longer to load.

After creating a picture, you will need to upload it onto a free picture host. You can read about using free hosts like Google Page Creator and Google Groups. We have also a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Take note of the picture URL.

Next, log in to your dashboard layout; under Template -> Edit HTML, scroll to where you see this:-

body {
background:$bgcolor;


Change background color

If you would like to change the background color of your blog to a very unique color, you can manually specify the color value. Search online for color codes, or take a look at the HTML Color Chart to see if you can find your desired color. For example, if you have chosen a color code #B38481, change the above code to this:-

body {
background-color:#B38481;


If you are changing the background color of your sidebar only, add the color code under the relevant sidebar heading.

#sidebar-wrapper {
background-color:#B38481;


Similarly, if you want a different color for your main post column, add the color code as follows:-

#main-wrapper {
background-color:#B38481;


Note that different templates may label their stylesheets differently. The #sidebar-wrapper may be called #side-wrap or something to that effect.

In some templates like the TicTac Template, the background color you see is due to a background image and inserting a color code into the template will not help. To have a different color, this background image will have to be edited. For more details, read the article on Background Color of TicTac Template.

Add a background image

The code to insert is this:-

body {
background-image: url(URL address of your image);


Remember to insert the URL address of your image in the brackets. If you would like to have a feel of how a background picture will look like, I have uploaded a test image at this address – http://i154.photobucket.com/albums/s255/ownlblog/narutosasuke1024x768.jpg

Insert the URL of this test image into the above brackets and Preview your blog.

You can also have a background image just for your sidebar. Locate the style and add the background image code accordingly.

#sidebar-wrapper {
background-image: url(URL address of your image);


For a background image to your main post body only, add the code here:-

#main-wrapper {
background-image: url(URL address of your image);


Repeat background image

By default, the image is repeated to fill up the entire background of the page. If you have a small or tile-sized image, it will appear like a print pattern in the background. Sometimes, you may choose not to have the image repeated. If that is the case, you can insert this code:-

background-repeat: no-repeat;


Alternatively, you may only want the image to be repeated horizontally. The code is this:-

background-repeat: repeat-x;


To have the image repeated vertically, the code is this:-

background-repeat: repeat-y;


Position background image

If you have an image that is not repeated, you may like to specify the exact position of this image on your page. The HTML code to be inserted is this:-

background-position: top left;


Your image will appear at the top left corner of your page. The other possible values that you can use to replace “top left” are:-

top center;
top right;
center left;
center center;
center right;
bottom left;
bottom center;
bottom right;

If you do not want it entirely left, right or center, you can also define the horizontal and vertical alignments either in percentage or in pixels. Use either of these values instead, with x being the horizontal value and y being the vertical value.

x% y%;
xpx ypx;

Static background image

After that, you may specify whether you want your background image to remain in a fixed position when the contents of your blog are scrolled. By default, the picture scrolls with your content. To have it stay put, the code to insert is this:-

background-attachment: fixed;


Putting it all together

The eventual CSS code that you will have for your customized template may look like this:-

body {
background-color:#B38481;
background-image: url(http://i154.photobucket.com/albums/s255/ownlblog/narutosasuke1024x768.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;



You can also combine the attributes into one line and the shorthand code will look like this:-

body {
background:#B38481 url(http://i154.photobucket.com/albums/s255/ownlblog/narutosasuke1024x768.jpg) no-repeat center center fixed;



Putting the above code into my blog, this is what you would see.

Background Image for Blogger Template

Of course, after having added the background image, you will need to adjust the colors of your text so that they stand out against the backdrop. Go to Template -> Fonts and Colors to do that.

This guide will give you an image background to your Blog. Sometimes, you may have several images, all of which are suitable for your Blog. You can read Random Header and Background Images on how you can have the background images rotated and a random image shown upon every page load.

You may also want to refer to the related article if you are thinking of adding an image to the Blogger Header.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

146 comments:

j4ur14 said...

Exelente aporte!! Realmente me ha servido mucho.

Excellent!! It has really been a help for me.

Michelle Wun said...

Great tips. Learn a lot from you!

Thomas Hamburger Jnr said...

Kitten on Fuel My Blog kindly pointed me to your blog.
I've been able to change the back-ground colour on my blog as a result - a small step for man, but a HUGE leap for Thomas Hamburger Jnr!
Looking forward to working my way through your other suggestions.

Kind Regards
THJnr

msquared said...

i've bookmarked your blog

Jolanda said...

Thank you for sharing this information, I have stumbled it to StumbleUpon. Your blog is very informative and I will return over and over until I can do it all on my own *smiles*

Sue said...

This is very helpfull, thank you!
I'm having a little trouble with putting a background image on my blog though, it just shows up white. But I'm sure I'll figure it out!
Thanks for the info!
Sue

violetforthemoment said...

Yeah I'm having the same problem Sue. Will keep fiddling with it. This blog is very user-friendly though.

Montserrat said...

THANK YOU!! I've been trying to figure out how to add a patterned background for weeks. Now off to figure out how to make my entries stand out. . .

Joanna said...

yeah me!!!! I figured it out. I am so excited. Thanks!!!! Thanks Thanks. Now I just have to do it on my real site, not my practice one!!! Thanks! Thanks! Thanks! If it is okay, I am going to book mark your blog!!!

Self Taught Artist said...

what am I doing wrong...
body {
background:#ccc;
background image:url('http://farm1.static.flickr.com/178/487237144_85a7eba105_o.jpg')
margin:0;
text-align:center;
line-height: 1.5em;
font:x-small Trebuchet MS, Verdana, Arial, Sans-serif;
color:$mainTextColor;
font-size/* */:/**/small;
font-size: /**/small;
}

no image shows up, just the same dull gray color in the background.

bizwhiz said...

Hi self taught artist

There should be a hyphen between background and image:

background-image

Otherwise you may also insert the url after #ccc; as shown in the shorthand example.

Self Taught Artist said...

body {
background:#ccc background-image:url('http://farm1.static.flickr.com/178/487237144_85a7eba105');
background-image:url('http://farm1.static.flickr.com/178/487237144_85a7eba105')

at the risk of being a dolt, when I did this I just got a white background. I know nothing about code, and messing with this stuff, so thanks for checking and helping.

bizwhiz said...

Hi self taught artist

In your case, your code should read as follows:

background:#ccc;
background-image:url(URL of image);

The colons, semi-colons, hyphens are important. You don't need inverted commas in the brackets. The URL of image will be the full address beginning with http and ending with .jpg or .gif

Please copy the above and paste into your template. Insert the URL of image. Let me know how it goes :)

Self Taught Artist said...

bizwhiz you rock!
it works but I have one question. I was worried about the page taking too long to load if I put a large resolution background image up ( I hate that when blog pages take a day to load because of all the bells and whistles), so the 200kb one I put up naturally tiles and looks bad. do you have a suggestion for the correct pixel w x h to use to have it cover the page?
thanks a lot!

bizwhiz said...

Hi self taught artist

The standard browser size is 600x480 I think. If you intend to have one picture and not have it repeated, you would want to consider having the picture position "fixed". By default, it repeats.

Min Min said...

Hi Sir, thanks alot for your tips, it was very great. I posted my logo on the bottom right of the site hteinkmin.blogspot.com. it was working fine, but I have another image which i wanted to post on the bottom left of the page, which i have space around width 100 and hight 600 pixel. My question is how do i add another background image on the left, without disrupting my icon on the right. Pls do contact me : hteink.min@gmail.com Thank you very much :)

bizwhiz said...

Hi Min Min

I suppose you used an image editing software to create that MIN image that you currently have. You could create a new blank canvas, with an extended width, paste the 2 little images at both ends, save the new image, and use that as the background image.

The setting will then be "bottom center" instead of "bottom right".

Min Min said...

Hi Bizwiz

Thank you for your prompt reply, so i have to assumed that i could only use one background image at a time. Ok i will adjust then .
thank you. And anotehr problem is whenever i wrote CSS code in my Post Box to let ppl read, it disappeared. Is there any coding to avoide those css working when posting my blog!So they can read and copy my css code Easily. I am confused! thank you

bizwhiz said...

Hi Min Min

Regarding the image, you can define another CSS style to include the image but the suggestion I mentioned is neater, and you are assured that the images are aligned.

When you write the codes, you will have to parse them or change them to character entities. I gave some examples of the common ones in my article on AdSense Code.

Alternatively, you can put them in a textarea with the opening and closing of a textarea tag.

AsSphere said...

a nice guide to change my default BG colour.. thx bro..

Bungi said...

i find your site very useful for a newbie like me! thanks for sharing your knowledge.

Becky said...

your instruction is so easy to understand! I am having a problem though, the background image is not working... i even used the practice image that you provided a link for.

Any suggestions?

bizwhiz said...

Hi Becky

Have you inserted it into your blog? I don't see a blog under your profile. Perhaps you want to put the code in and let me know. I will have a look at the blog.

Lost Poet said...

Your Tips have helped me a lot. I have used a few tips u have up and have had satisfying results (after tweaking a bit).

As a small thank you, I am linking you up from my blog. Do visit my blog and leave a comment if u like how it looks now and especially leave a comment if you have one on the content, please.

Damien Moran said...

great blog, thanks for the useful advice. I had a repeated background image that looked cool but somehow I messed with the html and not can't get it back.
Help!!!!!

This is the html I currently have in and around it:

body {
background-image: url(http://photos1.blogger.com/x/blogger2/7426/3524/240/z/873116/gse_multipart73596.jpg);
margin:0;
text-align:center;
line-height: 1.5em;
font:x-small Trebuchet MS, Verdana, Arial, Sans-serif;
color:$mainTextColor;
font-size/* */:/**/small;
font-size: /**/small;
}



Please tell me what are the errors....

Thanks a bunch.

bizwhiz said...

Hi Damien Moran

Your html looks fine. Nothing wrong with that. I see that there is a marquee code at the top of your template which probably shouldn't be there. You may want to remove that and preview your blog to see if your 127x117px repeated image is back. If you want to place a marquee code, you may want to read Scrolling text to see how it can be included in the template.

Damien Moran said...

Bizwhiz, you're a legend. Thanks so much. This was bugging the me over the past few days. I really appreciate the help. Cheers!

Melissa said...

Thanks for all the great info! So easy to follow.
Have a question though...
I just wanted solid colors in my background and got those changed but it looks funny (http://untaphi54.blogspot.com). Is there a border or something I need to change to the pink on the sidebar and white in the main post match up and the teal stays out?
Thanks
Melissa

bizwhiz said...

Hi Melissa

Presently, your teal color is in this tag.

body {
background:#7FD3C4;

If you don't want the color, you can remove the background color or change it. Am I to understand that you find the words too close to the edge? You can go to the sidebar tags and add a padding.

#sidebar-wrapper {
padding:10px;

#newsidebar-wrapper {
padding:10px;

You can change the values and preview the blog to see if they are what you have in mind.

Melissa said...

THANKS BIZ WIZ!!
I played around with your suggestions and got it to do exactly what I wanted.
Thanks again,
Melissa

BillyWarhol said...

Fantastic Blog + Info!

i remember struggling when i first started Blogging on Blogger* Ironically the template i chose didn't even have a category for Links!!

Needless to say i figgered out how to do it - but i thought since that is supposed to be a big rule of Blogging that they would have at least provided that option!!

;))

Forced me to get under the hood & get my fingers dirty + greasy learning a lil HTML but worth the Pain*

Now my next step will be trying WordPress which seems even more daunting*

;))

Nicholarse said...

By crikey! This is a great blog. Thanks for writing it. Clicked on one of your ads as a mark of respect. All the best.

NM

Inside Avenue said...

Thank you so much! This has been a huge help for me. I've been struggled with this until I found your post, which was very clear and concise. Thanks again.

Rev said...

bizwhiz, i have a problem here, how can i put 2 images (one on top left and one on top right?)for my background? Hope you can reply me soon =)

bizwhiz said...

Hi Rev

You mean to replace the image that you currently have in the background? The easiest way is to use an image software, create a new image with a large width, leave the middle part of about 660px empty, place your images on the left and right, save the image, upload onto a server. In your template, you have already linked to a background image. Replace that with your new link and save.

Rev said...

thanks!! that idea really work! thanks a lot, check out my blog! =)

Laura said...

I can't get enough of this site! I'm having the best time tinkering with my blog using your terrific directions.

I've got a question about background color - how do I change my background so just the section where my posts go (I think it's called the "main wrapper"?) can be a different color than the sidebars? Even better, I'd love to set apart each post in a little bordered box with a different color in it. Any ideas?

Thanks in advance!

bizwhiz said...

Hi Laura

You can add background color to the main post by inserting this and substituting the 000000 with your preferred color code:-

#main-wrapper {
background-color:#000000;

If you want to have a different color for the sidebar, you can also add the code to these:-

#sidebar-wrapper {
background-color:#000000;

#newsidebar-wrapper {
background-color:#000000;

To have alternate colors for each post would require some tweaking of the template. When we are able to do that, we shall post it.

C said...

Is there any way to shade my main wrapper area, but still be able to see my background image through the color? I've seen this technique on other blogs and was curious to see if anyone knew how to accomplish this....

bizwhiz said...

Hi C

The image used is a GIF image but in the image software, the user has specified certain parts to be transparent. There are some softwares that can do that, the common ones being Photoshop and Paintshop Pro.

Ginger said...

Hi. I find your tips very helpful, I have been trying to change the background of my post content for a long time.

I managed to change it to white colour according to your instructions, however, the top part of the post is still the same old colour!

It is very awkward looking.. top pink, bottom white.

here's what i did to my html:

#main-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: left;
background-color:#ffffff;
margin: 0 0 0 3px;
padding: 0;
width: 483px;
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 */
}


I just changed the code colour to the code of a white colour.

What did I do wrong?

You can view it at my website at http://feastmalaysia.blogspot.com/ for a better view.

Thanks!

bizwhiz said...

Hi Ginger

You can't simply change the main post background color in the Thisaway template that you are using. To better understand what I mean, you can see in your content-wrapper an image link that ends with bg_main_wrapper.gif

Copy that link into the browser and view the image. You will notice that the image is a thin line that is repeated throughout the template. The bigger part on the left is slightly pinkish and that is for the main post. The smaller part on the right is for the sidebar.

If you want your main post white, edit this picture using an image editor. Color the big segment on the left white. Resave the picture and upload it onto a free server. Then replace the link in the template with this new link.

Ginger said...

Thank you bizwhiz!

I have managed to successfully opened the url in a browser.. but I have no idea at all how to colour it white.

If I could ask a small favour from you, could you please colour it for me then send me the link? I could then save it and upload it myself.

Many thanks in advance. I hope that I am not asking much from you. I really want my main post to be in white colour.

THANKS!

bizwhiz said...

Hi Ginger

Since you have linked to me from your blog, I have no problems with your request.

The image has been redone and uploaded at http://www.blogpulp.com/imagehost/images/57286692.gif

Replace the http://www.blogblog.com/thisaway_rose/bg_main_wrapper.gif with the above link and your background should be white.

Ginger said...

bizwhiz: Ive managed to do it finally!! THANK YOU VERY MUCH!

Christa said...

I am having a problem getting the white across the whole section like you have on your page. I can get the sidebars and the main to change but the problem is the margins. I needed to add the margins since the lettering from my main was riding right up against the sidebars. Is there a way to get the margins to change color as well without changing the background?

bizwhiz said...

Hi Christa

What is your blog URL? We can take a look.

christa said...

Hi there, this is Christa again... sorry about not leaving the blog URL.

I ended up just making it all one color till I figure it out... but here is the url...
http://tipzter.blogspot.com/
don't mind the mess on the blog... I am really new to this and just getting my ideas ironed out.

bizwhiz said...

Hi Christa

You mentioned that you can change the background color of the main post and sidebars. To add a margin to the sidebars, you can insert this:-

#sidebar-wrapper {
margin-right: 10px;

#newsidebar-wrapper {
margin-left: 10px;

These margins will follow the color of the sidebars.

Tipzter said...

Hi... Ok... I did what you said and it helped with another error I was having.

I decided to take a look at the source of your page and the one thing I noticed it that in the #outer-wrapper { you had background color in there.

I guess from all my reading about it I mixed things up and in my head the #outer-wrapper { was the very outside of the page (the blue on yours) and where you would put a background image. But when I put that color in that section like you have on yours... It ended up filling in the margins between the other sections and left the very outside edge the color it was... Confused? So was I. :-D

So... Thanks! Love your site!

BeBopGrandma said...

how do you change the size of a header. I have a self made header and it is small. can you help me. thanks

bizwhiz said...

Hi BeBopGrandma

You can alter the size of the image using an image software before you upload onto the Header. There are free softwares like Google's Picasa and Irfanview. In your case, the width and height of your Header is not fixed, and the size of the uploaded image will be the size of the Header.

bizwhiz said...

Hi BeBopGrandma

On your other question regarding tabs below Header, we wrote an article on Horizontal Navigation bar. You may want to see if the guide there is what you are looking for.

Mimy said...

Hey there! i've found ur blog very helpful but i still have a problem. I'm trying to put an image as a background and i cant. I've followed ur instructions but it just wont work...the background stays pink...am i doing something wrong..?

body {
background-image: url(i've put the url of my pic here, it wont let me publish it now);
background:$bgcolor;
margin:0;
color:$textcolor;

bizwhiz said...

Hi Mimy

What is your Blog URL or the type of template you are using? If you enter the URL of that picture into your browser, do you see the picture straight away? If you see a page with text and that picture, the URL is not a hotlink to that picture and cannot be used for this purpose.

esmiley said...

Please help! Your instructions are so thorough, readable, and with great images. . .but everytime I try to add an image it doesn't work. I tried with my webpage and your sample website and all I get is white. Here's my code. Any idea what's going wrong? Thanks!

body {
background-color:#FAF8CC;
background-image: url(http://myenonomous.googlepages.com/PAPIER_DREAMS.jpg);
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed; margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

bizwhiz said...

Hi esmiley

What is the Blog URL? There is no public blog in your profile. What template are you using?

esmiley said...

The blog in question is www.bylundbeat.blogspot.com

I am using minima template-ochre but with some tweaking of font colors and fonts. Do I need to change it to minima white and wipe everything out?

bizwhiz said...

Hi esmiley

No, you don't have to change anything else. If at all, change the picture because the file size is too big. If you try putting in what you wrote into the template and refresh the page, you will probably see the background image, but after a very long time.

To determine if that is the problem, upload any small picture and choose to repeat it, instead of no-repeat. then view your blog page.

If you still want to use your picture, you can reduce the image size by half. You can optimize it further by lowering the quality. There are image optimizers available online. They can help to minimize the file size.

esmiley said...

Thanks for your help!

Thanita Glancey said...

Hey there! I am so happy I found your site. Well it was like I tripped into it! You have been very helpful. I have a question for you, (and I'm sure you get many!); I changed my background using your suggestions and some trail and error. I can't get the right side of the background to just disappear (if this makes any sense)!
Basically, I want everything to line up under my image header but there's a little extra background image off to the right of the header and the body.
Here's my site: http://www.onehappytree.blogspot.com
Can you help me? Here's my email: littlemetg@gmail.com
help help please!
Thanks,
Thanita

bizwhiz said...

Hi Thanita Glancey

First, I must say that your template looks odd, with all the negative margins. Any reason why you want all those in?

If you don't want the margin at the side, you can stretch the template such that it occupies the whole screen. The total width should also be about the same as your header.

You can consider changing to this:-

#outer-wrapper {
width: 980px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 490px;
margin-left:25px;
float: left;
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 */
}

#sidebar-wrapper {
width: 220px;
float: left;
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 */
}

#newsidebar-wrapper {
width: 220px;
float: right;
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 */
}

Bre~ said...

Thanks so much :D

inCLYNEd said...

Hey... how do i make the sidebar with a coloured background and translucent like it were frosted.

http://inclyned.blogspot.com/

I want to make the side where the text are more obvious but also be able to see the picture in the background.

thanks a lot.
inCLYNEd

bizwhiz said...

Hi inCLYNEd

CSS allows background:transparent but that will show no background color. To have effects like you mentioned, you may have to use an image editing software like Paintshop Pro or Photoshop. When we have time to try it out, we shall write about it.

inCLYNEd said...

I was thinking more of a translucent background.

i used opaque: 0.5;

But that made my text translucent also.

Any way i can make the text solid?

MrsYFA said...

BizWhiz,
You helped me on yesterday and I really appreciate it, I have one more question. I have tried to change the background of my main wrapper (where my posts are) but it's not working? I'd like to try collor 4cc417, but no matter what color or background image I try to insert, it does not work???
yawdfromabroad.blogspot.com

bizwhiz said...

Hi MrsYFA

If it doesn't work, it is probably because the code is wrongly typed or it is inserted at the wrong place. Go to where you see #main-wrapper { and insert underneath it this (as per our example):-

background-color:#B38481;

If you see a color, that means it is at the correct location. You can then change the color code.

MrsYFA said...

Here's a screen print of where I put it, I've tried a couple of other places as well and still nothing is happening???

#main-wrapper {
background-color:#4cc417;
margin-left: 1%;
width: 67%;
float: left;
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 */
}

html > body #main-wrapper {
margin-left: 2%;
}

#sidebar-wrapper {
margin-right: 1%;
width: 25%;
float: right;
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 */
}

html > body #sidebar-wrapper {
margin-right: 2%;
}

bizwhiz said...

Hi MrsYFA

I took a look at your source code. You have linked to an external stylesheet (yui.yahooapis.com) which sets the styles for your template. If you know where you have taken that from, see if they can help you change some of the settings. Whatever else you change will not have any effect because their style classes are named differently, e.g., #doc, #doc2 and so on.

This could also be taken from where you downloaded or changed your template to three columns. You did not change the template using our 3-column template guides. If you can remember which site you referred to, perhaps revisit that site and pose them your questions.

Ginger said...

Hi bizwhiz.

It seems that the url link that you gave me http://www.blogpulp.com/imagehost/images/57286692 had expired. There is now a pink colour at the top of my content page. I really dont want to bother you any longer, but I just want to know what had happened. Thanks again!

bizwhiz said...

Hi Ginger

Nothing has happened and the image that I did for you at that image location is still working fine. You can double-check that at your end by entering the image url into the browser.

bizwhiz said...

Hi Candy

You wrote a private message. We do not need your password to view the blog template. We have never acceded to any request to login to other accounts on readers' behalf. Indeed, you should never give your password to anyone.

In your case, you are saying that you have a background image that doesn't show. I suppose it is the one in the body? Just add a semi-colon after the line, as per our example, and it will solve your problem.

background-image:url
(image url);

bizwhiz said...

Hi Candy

I refer to your latest private message. My reply is still the same, add a semi-colon AFTER the line, as per our example, and it will solve your problem.

background-image:url
(image url);

Candy said...

Hi again :)
Well..... I just did it. I put the semi colon right ater it exactly like you said but it still isnt working for some reason.
Any other ideas?
I really appreciate all your help by the way.

Most kindly,
Candy

bizwhiz said...

Hi Candy

Do you not notice that you have inserted an extra semi colon in that same line? Why is there a semi colon after "url" when there isn't one in any of our examples or answers?

Copy this and substitute the IMAGE URL with yours:-

background-image:url(IMAGE URL);

Candy said...

Well, you will be happy to know hahaa that I FINALLY did EXACTLY what you said...and it worked.
Thank you for helping me and mostly for your patience ;)

Candy

Choppy Chop said...

hi bizwhiz,
i trying to complete my asgmnt here and i cant seem to get the bground image right. i copied evrything u did..and it worked . the naruto image appeared, but when i changed the url to my own bg-image, its blank again. here is the url of my blog:

http://tyrochopsticks.blogspot.com/


and this is the image url :

http://i243.photobucket.com/albums/ff254/nanacholic/oui_oui_frame_by_bikikiz.jpg

bizwhiz said...

Hi Choppy Chop

You are using Thisaway template which has background images in the #main and #sidebar-wrapper. They probably block whatever else you have in the #body.

At the moment, you have a tiny image that you put in the center of the page, and it is not repeated. If you want to be able to see it and not have it blocked by the other images, try changing it to "repeat". Alternatively, have a larger image.

Kyd said...

Hey bizwhiz, I'm using the Son of Moto template and I was wondering if there's any way to change the color (which is green) on the sides and top of the background. Thanks for your help!

M.E said...

God Bless you for this info...am fiddling around..& ur page is the most useful I have come across for a newbie like me...THANKSS!!!

lets earn said...

wow..wow..woow..

salute to you for the great info!

Coffeecup said...

Thank you for an excellent blog! At last some help for novices like me. I will definately add a link to your page.

I am really keen to change my background and am now at my wits end trying. I can't make the image I've chosen work on my blog, it just goes white. Can you suggest where I'm going wrong please in steps a dummy would understand!

body {
background-image: url
(http://farm3.static.flickr.com/2212/2081569190_68d673c461.jpg?v=0);
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;

The E Home Maker said...

hi
i am using the Rounders 2 template. i tried to change the main bg to an image, but no success. is it possible for u to help me??
thanks
very informative blog.

Tamara said...

I want to use an image from my flickr page as my background, but flickr says you're supposed to use the html code, not the url, so that the photo links back to the flickr page.

Your instructions work great with the url, but I'm not sure how to get the html to work.

Can you help me?

Kathy said...

How can I set the background on my header to not have a background. I want my main background to show behind the writing. I did this with one of my blogs but it was completely by accident and now I cannot repeat my mistake. Can you help?

maria said...

Ok, what am I doing wrong here?

body {
background:#ccc;
background-image:url(http://img215.imageshack.us/my.php?image=pi16241un6.jpg);
margin:0;
color:$textcolor;
font:x-small Georgia Serif;

I hope you can tell what's wrong.

Natalie said...

Wow, it's been a while since anyone commented... are you guys still there?

I've read through all of this stuff trying to find the answer to my question, but have had no luck. I successfully put a background image on my blog and added a third column, but I'd like a white background behind the posts and sidebars (like the one you have here on yours). Am I using the right template for this? Maybe I just need a vocab lesson on what wrapper goes where.... help!

I'm linking you to my main blog because your site rocks.

kahawai chaser said...

Many thanks for your tutorial. I would like to display about 6 - 8 small images on the L/H side of my blog. Currently I can only manage one. Is there a easy way to achieve this? I have tried repeating the code - but no luck. My blog is http://pcsourcepoint.blogspot.com/

Thanks...
Michael, Auckland, New Zealand

Erunäme Rïne said...

I'm just trying to create my own layout right now, and I like how's it turning into what I was looking for, but I have another problem, you'll see... I want to post a background image, I created an 1444px X 900px image, I uploaded it to Photobucket, and copy+pasted it to where it belongs in the Template but when I clicked on the preview I found that the image was resized and it didn't fill the entire screen as I wanted, these are the settings:

body {
margin: 0;
text-align: center;
min-width: 760px;
background: #784782 url( http://i33.photobucket.com/albums/d97/Eruru/prueba3.jpg) top left no-repeat fixed;
color: $textColor;
font-size: small;


it has Transparent Columns, that's why it's FIXED... any recommendations?

Thanx a Lot!

Anonymous said...

hello!
I wanted to ask is it away that the picture can "fit the screen"? I know it sounds stupid since everyone has a different sized screen but what I mean is if there is a way for the code to make the picture always the background from side to side and from top to bottom so that irregardless the size of the screen everyone sees the picture fitted to the screen.

Thank you!

Kay

bruin787 said...

fantastic blog!!!!

i have a question. i followed your instructions and uploaded a background picture, but is there a way to make the other blog elements transparent, so that the background picture also shows up there too? i cant seem to make it work. =(

Master Z said...

I was looking for this one line everywhere:
background-attachment: fixed;

Thanks u legend

Julio A. said...

it does not work for me. I'm using Minima Black template, and I've follow up your instruction in order to insert a background image and when I get the preview the message returnedd is that "the change requested cannot be made"

This is what I have done:

body {
background-image: url(http://img249.imageshack.us/img249/8835/bloodwr7.jpg);
background:$bgcolor;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align:left;
}

Can you help me to identify whre is it wrong or if anything else that should be done?

Thanks, great blog by the way

Neil Morris said...

I changed the background of my Blogger template using your instructions. The changes show when using Firefox but is only a white background when using IE. What can I change/add to correct this?
www.marqueemarquis.com

manan said...

hi, bizwhiz

me trying to increase the widhth and height of sidebar background image,
but not sucessful, plz give me code for increase the width ofsidebar backgroung image.

thanks.

Sheree said...

First off, thankyou for such a great site! It is so helpful.

I made my template into a 3 column template, and I added a background image to it, but when I looked at my blog, its difficult to read my middle column (my posts column). How do I set it up to be background everywhere exept that middle colunm? Do I use the instructions for sidebars only, or is there a different way to do that?

Deanna said...

Thanks for all your great information! I read through this post, but was wondering how you changed the color of the background on the very sides of your blog, past the area of the sidebars?

Thanks again for you help!
Deanna
dntodd@gmail.com

mohave said...

Thanks a lot for all your tips.
I already picked some and are really well explained.

All the best!

BLaH BLaH said...

Can I know whether instead of using a .jpg picture as a background, can i use a flash .swf file as a background?

PS. considering I am able to upload the .swf file into the server.

Benoît Curinier said...

Hello, thanks for this info.
How can I change the background image for each label when I using a navitab ?

If some body have answer it will be great for my blog !

gracesecret said...

Um, hi, i found everything okay putting the background image in and everything, but the content in my blog ends up transparent and hard to read, do you know how i can fix this?

gracesecret said...

I have no problems putting up a background image in my blogger, but I just want to know if you have any suggestions on how to make my content (boxes) not transparent when I put up my background image. I dont know how to fix that.

Yamie said...

Hi!
I'm currently testing the customization process with the "rounders" template.

I would like to change the background color both of the header and the main background, but when I do so, the edges still remain the prefixed color and doesn't simultaneously change with the color of the background I have chosen.

The result is that the "rounded edges" doesn't look "rounded" anymore.

It's a bit difficult to explain, but I hope that you understand what I mean!

So, is there a way out of this problem?

Yamie

Anonymous said...

Hello, I learn a lot from you and I just want to say very-very thank you for your website. you help me a lot.

Yesterday I learn about copy write for our blog from you too, and today when I'm searching on google about default image background, this site come at first line:

http://blogging-essentials.blogspot.com/2007/05/background-image-for-blogger-template.html

This site have a link to your blog but they written the same (copy + paste) tips just like your blog.

Please check it, and if that's a mistake, then I'm sorry but I really love your site so much that's why I don't want other take advantage from your material.

Thank you once again and have a good day.

محمدعلی said...

THANKS A LOT, I think you are the ONLY blog actually giving out the correct instruction as for putting a background picture on the blog, with different positions and options. I truly appreciate it and I will recommend your blog to all of my friends. Thanks again!

Mrs. Mordecai said...

Thanks. I found this very helpful and am now enjoying a lovely background.

Constademon said...

Hey i tried your method and worked fine. My problem is that on the left side of the "Header" & "body", there is a border with the colour that used to be the background. I had the same problem at the right side but i correct it by changing the width of the #outer-wrapper

Check it out at cellblogtango.blogspot.com

I would appreciate your help.
Thanks in advance

www.taskisla.com said...

One of my top bookmarks about blogging!

Great tips! Easy to follow instructions!

Thank You!!

The Scrap Boutique said...

Thanks for all the great info. I'm so glad I found this blog. Everything is working out great except for my sidebar.
Do you see anything I'm doing wrong here?

#sidebar-wrapper {
background-image:url('http://i281.photobucket.com/albums/kk202/dramamamaphotos/Background_Orange_Dots_shabbymissje.jpg')
width: 220px;
float: $endSide;
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 */
}

Mel M. M. M. said...

ThankYouThankYouThankYouThankYou
ThankYouThankYouThankYouThankYou
ThankYouThankYouThankYouThankYou!
You are Brilliance in a vast sea
of 'what the heck are they talkin'
about & that tip just won't work!'
:0) Mel

Anonymous said...

RE: Quote of the Day

When I drunk about the evils of reading, I gave up drinking.

BlueRain Alchemist said...

Sand dollar.........#sidebar-wrapper {

Damn,.........finally I found it.

Masquerading as div#sidebar {

in the sand dollar template

Julia C said...

can you help check mine too?

its still like normal, the picture didn't show up.

body {
background-color:#FFFFFF;
background-image:url
(http://s74.photobucket.com/albums/i275/juliacheam/?action=view¤t=maromi.jpg);
background-repeat:no-repeat;
background-position:bottom right;
background-attachment:fixed;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Matt Cruse said...

This is great. I've recently stuck the paper background (from Blogger's Scribe template) behind my blog, but I would like to know how to also use background images for the top centre and bottom centre (unrepeated). In this case, it would provide the "burned edge" look around all four sides rather than just on the left and right. The background I'm using at the moment is essentially the "middle" image only.

http://electricwriter.blogspot.com

b said...

how've you made your blog 'page' white but the browser background teal then? great blog

Ambrosia Delights said...

I am working on my blog in the "Ms. Moto" template, and I'm wanting to change the pink background, but am having problems figuring out where to do that. Can you please helps?

Thanks!

Ranjith said...

hey great post , i kind of got info to change background images from various blogs and websites , but yours is the best. I love the ease of it.

Anonymous said...

Thanks!

Kristy said...

Hello bizwhiz...
Perhaps this is a redundant question, but I tried all the other people's answers to their questions of why my background image will not show.

This is the link to my blog, would you mind taking a look at it to see why my code is incorrect.

Thanks so much for all the amazing things your site has taught me to add to my blog!

Help... this is the last thing I'm trying to add, except the favicon that I can't get to work either... wanna look at that too while you're in my sources?

Thanks so much!
K

—•(-•Çýвэя çяเмเиลℓ•-)•— said...

hey my blog image is not fixing in a position even after using the attachment code ..pls tell the solution

~*Becky Joy*~ said...

WOW! Your instructions are so clear! I've used your walk through to put a background image on all of my blogs!! Thank you so much, YOU ROCK!!!
~Becky

Rachael said...

HELP! I'm an idiot and don't know what I'm doing wrong here!

body {
background-image:url(http://s51.photobucket.com/albums/f370/rach_christensen9/?action=view&current=swimmin1.jpg);
background-position: center center;
background-attachment: fixed;
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Ryan said...

Thank you very much for this kind information

JP said...

Is there a way to upload an image to your blog so that the url is from your blog?
Or what is the best way to upload images so I have a url to use?
Thanks

Anke said...

Just discovered your blog! It 's really great!

One question: I want to change my background, but I can only change it when I change my template as well. It doesn't work with the minima template. When I choose another template, I can change the background but I can't get the other settings the way I want it. Is there a possibility of changing my template just the way I can change my background and keep the other settings the same?

( I hope you understand my poor english )

Janice said...

Hi. Ur info are so useful. But i've got a question. How to I make my image to have tail when I scroll down?

Erm.. I mean that I din fix the image to a position when I scroll and i wan my image to continue with it's gradient when i scroll down.

I'm not good in expressing, hope you understand.

Jan

Standard Issue Concierge said...

hi there, you're post has been really helpful but i was wondering how to make the image i want to use for my background fill the page. since my computer is widescreen and not all people have widescreen, i wanted it to adapt to the dimensions of whoever uses it.

if you can email me back at PatriciaRealini@gmail.com i'd really appreciate it.

iEn said...

i really luv for this tips.. i would like to translate on my blog.. thank u very much :)

Cat said...

Hi, luv ur blog..I just started a free background layouts blog and am having trouble making them fit the whole screen...Do you have any tips on what size to make them? (i am using 1600 pixels by 1200 pixels) And the best way to add them to a blog? I have looked at so much 'code' that my head is spinning right now...lol...

Thanks soo much for your help...
Cat..

Cat said...

Hi bizwiz, love your blog..
could you plese take a look at my blog and tell me how i can make the background image fill the screen?? and have the image behind the posts tile less??

thanks,
Cat

TEll notHIng said...

Hi,i will need some advices.I'm having a little with putting a background image on my blog,my picture does not shows up.Any idea what's going wrong?

body {
background-color:#000000;
background-image:url(http://i367.photobucket.com/albums/oo112/mergood/P2-143.jpg)
background-repeat: repeat-x;
background-position: top left;
background-attachment: fixed; margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Thanks you.

miatalewis said...

hi-
Im having an issue with blogger.com....
I am using the washed denim template

I used your code and it comes up
More than one widget was found with id: Feed1. Widget IDs should be unique.


body {
background-color:#B38481;
background-image: url(http://i233.photobucket.com/albums/ee314/miatalewis/background-van.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
margin: 0;
padding: 0px;
font: x-small Verdana, Arial;
text-align: center;
color: $textColor;
font-size/* */:/**/small;
font-size: /**/small;
}
a:link {
color: $linkColor;
}
a:visited {
color: $linkColor;
}
a img {
border-width: 0;
}

#outer-wrapper {
font: $bodyFont;
}

corajoso camaleão catatónico said...

Hi, i've tryed almost everything following your instructions. But for some reason i can't add the background image i want to my blog
http://ndsnflyer.blogspot.com/. I have this on my html:

body {
background-image:
http://img70.imageshack.us/img70/360/padro20ph3.jpg;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;

Hope i can get some help from you. Thanks in advanced.

Iman Taqwa said...

look at my blog..http://tajdid-dakwah.blogspot.com

how to change the image header?
i want to change the title of 'wordpress theme another wordpress theme'.

tq.

Anonymous said...

This is very basic, but my template (which is currently one of the rounders series) does not have the script:

body {
background-image:url

The closest thing to that in the template is:

body {
background:#aba;

Would I insert the url after the word background anyway (after deleting "#aba")?

ΛΑΜΠΡΟΣ ΠΟΛΚΑΣ, PhD, Msc, ΕΚΠΑΙΔΕΥΤΙΚΟΣ ΣΤΟ ΠΡΩΤΟ ΠΕΙΡΑΜΑΤΙΚΟ ΛΥΚΕΙΟ ΑΘΗΝΩΝ "ΓΕΝΝΑΔΕΙΟ" said...

I'd like to add two different images in my background Minima template verically. One, on the left position, and another one on the right. How can i do this?
Thanks in advance.

Becky said...

Hi I am soley using your site for the great tips and tricks! I am running into a problem with the scribe template when it comes to getting rid of the image they set up for the background. I had the harbor template, but I couldn't get the 3 columns so I changed back to scribe. I inserted a background image from thecutestblogontheblock.com, but now I can't get rid of the image on top of the background. Any suggestions?
Thanks,
Becky

http://keepingmyheartathome.blogspot.com/

Lav said...

Hi,
I need your help. I want to create a centre space (for the 2 side bars and posting section) that is white from top to bottom like this site http://manyfondmemories.blogspot.com/ but I just can't.

Can you help me see what changes I need to make to my blog, http://jewelryoflav.blogspot.com/

Thanks!

-Flickzzz- said...

hi!
this one is very useful. but is there a way to put two images at once. for example- one image to the top left, the other to top right. currently I can only put one image. hope you will answer :)

Mike Quinn said...

Thanks that really help a ton! Btw, if possible you should put the "I have something to say" link before the older post... just a little easier to locate! Thanks Again!

Chic Maps by Nikki said...

I have spent all day trying to customize my blog, but to no avail. I am looking to add a background image and I believe I followed your instructions, all I'm getting is a white background. Any help you could lend would be greatly appreciated.

I am looking to have this image fully repeated in the background and here is what I have:

body {
background:$bgcolor
background-image:url(http://i3.photobucket.com/albums/y93/tricnic
/toilebackgroundjpg-1.jpg);
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

-Although, in my edit section the
'background-image: etc...' is all together and not on different lines like it formatted it here. PLEASE HELP!!!

uni said...

This blog was very usefull to me and help me a lot in building my own blog.I manage to change a backgound.Thank you a lot!

Laina said...

Yay, thank you!! I made my own custom background!! Thanks!!

Becky said...

Please help me fit this image into my background. I followed all the instructions, but it only remains the same size as it appears on the link. Thanks for any help.

here is my blog:www.crimsontosnow.blogspot.com

here is the link of the picture:
http://media.photobucket.com/image/old%20%20paper/ma365ro/OldPapyrusPaper.jpg?o=16

Jessica said...

Can you please help me! I cannot figure out why my background image is not showing when I try to preview it. It just shows a white screen. My code is as follows:

body {
background-image: url(http://i113 .photobucket.com/albums/n230 /Armyshortee83 /darkbrowndamask-1 .gif);
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;

I am sooooo lost! Thank you!