Template Designer: How to use your own background image

Update
September 2010: The image upload function is now available in regular Blogger. Jump to the tutorial now.
August 2010: You can now upload your own image, via Blogger In Draft.

The new Blogger Template Designer offers hundreds of beautiful background images to choose from, yet it does not provide an option to upload your own image.

So how do you go about using your own image as a background? The answer is using CSS. You can use your own image by adding a CSS background code snippet. The good thing is, with Template Designer you don’t have to go to Design > Edit HTML to add the snippet. It can be done from within the Template Designer itself.

(If you are applying your own background to a regular Layout Template, read Using image as background).

Here are the steps,

  1. Upload your background image to an image host such as Picasa, Flickr or Photobucket. Make sure the file size does not exceed 250kB. Once uploaded, get the direct link to the image.
  2. Login to your Blogger account.
  3. Go to Dashboard > Design > Template Designer.
  4. In Blogger Template Designer page click Advanced. Then scroll down the submenu and click Add CSS.
    css editor11
  5. Enter the following code in the CSS editor window:
    body {background: ColorCode url(YourImageUrl) no-repeat center fixed;} 
    .body-fauxcolumns .fauxcolumn-outer div, .body-fauxcolumn-outer .cap-top .cap-left {background:none;}
    • Replace ColorCode with the color code of the prevailing color of your image.
    • Replace YourImageUrl with a direct link to the image.
    • For a repeated, tiled image effect, remove no-repeat from  code line 1.
  6. Hit Enter key and the changes you make will be shown instantly in the live preview beneath the editor.
    css editor22
  7. If you like the result, click the orange Apply to Blog button to save.

  8. That’s it. Enjoy!

Uploading your own background image via Blogger In Draft

(added August 2010)

  1. Switch to Blogger In Draft.
  2. Go to Design > Template Designer > Background and click the dropdown button under Background Image heading.
  3. Click Upload Image button on top left corner of the pop up.
    upload background image
  4. Click Browse button and select an image from your computer. If you want a full-screen background, use a large image: 1800 px wide and 1600 px high or greater. However, make sure the image’s file size does not exceed 300kB.
  5. Once the image is displayed (uploaded), click Done.
  6. Set the background’s alignment, tiling and scrolling.
    background image setting
  7. Click the orange Apply To Blog button when you’re done.
  8. That’s it, enjoy!

104 comments to "Template Designer: How to use your own background image"

Whimsical online April 24, 2010 at 10:41 PM    

hello. I'm stuck!!!! I don't know how to get a direct link from my picture to put into the code. help please! thanks.....

Greenlava April 25, 2010 at 9:44 AM    

@Whimsical online
Post whatever link you have here, we'll figure out the direct link.

Kelly April 30, 2010 at 9:30 PM    

This does not work at all for me.

Greenlava May 1, 2010 at 1:15 AM    

@Kelly
Which blog are you applying the background to? I saw your blogs, none of them are Template Designer's.

Anonymous,  July 4, 2010 at 6:36 PM    

Itdoesn't work for Simple template. Only the lower part of it changes. :(

Greenlava July 4, 2010 at 8:18 PM    

@Anonymous
Code fixed. It should work on all templates now.

Anonymous,  July 6, 2010 at 12:27 AM    

HI!
I have followed the directions but all I get is a white background. Please help! :)
Melinda

Greenlava July 6, 2010 at 1:21 AM    

@Anonymous
What is your blog URL?

Anonymous,  July 6, 2010 at 6:33 AM    

I got it... :)
thanks anyway...
Melinda

surfinsarah1590 July 6, 2010 at 12:20 PM    

It repeats. How do I make it one big image?

Greenlava July 7, 2010 at 9:54 AM    

@surfinsarah1590
Just add "no-repeat" to code line 1, like this:
body {background: url(YourImageUrl) no-repeat;}

Brennon July 8, 2010 at 12:47 AM    

i originally had my image repeating as well, but added in the no-repeat. now i only have one image, but it's small up in the corner. can i make it take up the entire background?

Greenlava July 8, 2010 at 2:22 AM    

@Brennon
A background image displays itself in its original size, can't change that.
To display big, you need big image.

K.H. July 12, 2010 at 1:09 AM    

Like Melinda, I did this, but it changed the background only to white. Am I not waiting long enough? I believe I have followed the directions exactly using both Picasa and Flickr. No success.

Greenlava July 12, 2010 at 6:17 AM    

@K.H.
Are you sure you use the direct link to the image?
A direct link usually ends with an image file extension such as .jpg, .png or .gif.

K.H. July 13, 2010 at 8:21 AM    

So, you are right. I don't have the correct link. When I clicked the icon that said link, I found this:

http://picasaweb.google.com/lh/photo/cAbLHg2a7wC271ioEjdobQ?feat=directlink

No .jpg.

So, where to I get the right link on Picasa?

Greenlava July 13, 2010 at 9:40 AM    

@K.H.
Go to the above url. You should see a Download button on top left of your screen (below Picasa logo).
Click that button and you'll see the direct link in your browser's url bar.

K.H. July 13, 2010 at 10:15 AM    

Okay, I think I have the correct url, but it is still not working. I put the following in the CSS editor window and nothing happened:

body {background: url(http://lh6.ggpht.com/_LHe6nN8HVDk/TDn1wIYoPHI/AAAAAAAAAXU/tSSRJOA2vy0/iStock_000009107798Small2.jpg) no-repeat;}
.body-fauxcolumns .fauxcolumn-outer div, .body-fauxcolumn-outer .cap-top .cap-left {background:none;}

Greenlava July 13, 2010 at 11:22 AM    

@K.H.
Try hitting the Enter key after pasting the code.

K.H. July 13, 2010 at 12:36 PM    

I have an obvious way of missing the obvious. Thanks.

K.H. July 13, 2010 at 12:39 PM    

OK - one more question. Now that I have a new image on there, how do I make it look like the background is standing still, while the posts and gadgets scroll upward?

Greenlava July 13, 2010 at 9:33 PM    

@K.H.
To make the background static, just add the word "fixed" after "no-repeat", like so
body {background: url(http://lh3.ggpht.com/_LHe6nN8HVDk/TDkBcNM5hzI/AAAAAAAAAXU/TuoSVtaYLrs/iStock_000009107798XLarge.jpg) no-repeat fixed;}

K.H. July 13, 2010 at 11:54 PM    

Love it! Thanks so much.
Okay . . . I was not truthful. That was not my last question. I have another. Is there a way to send email notifications to people whenever I make a new post (to more than the 10 allowed in the settings, that is)? Or is suscribing or following the only way that can happen?

K.H. July 13, 2010 at 11:54 PM    

That is, I am wondering if I can make a kind of emailing list.

Greenlava July 14, 2010 at 11:23 AM    

@K.H.
I believe subscribing is the only way to achieve that.

The Coromandel July 20, 2010 at 8:05 AM    

I've followed all the instructions but it still isn't working. From reading the above comments I believe I have the wrong url. How do I find the direct link for a photo on Flickr? So far I have:http://www.flickr.com/photos/thecoromandel/4809937773/

Greenlava July 20, 2010 at 12:00 PM    

@The Coromandel
Go to the link above. Click the "All sizes" icon on top of the photo. Select Large size. Then scroll down to "2.Grab the photo's URL". The direct link is in the text box.

The American Homemaker July 23, 2010 at 11:38 AM    

I am trying and trying to get my picture to work as a background. I created it in photoshop and it's a large image, I also uploaded it in photobucket using a large size, but it keeps showing up teeny... I don't know what to do.

Greenlava July 24, 2010 at 12:03 AM    

@The American Homemaker
I see you've had it fixed.

Claudya July 26, 2010 at 11:19 PM    

Ty for the css code! Works great. xo

Greenlava July 27, 2010 at 12:10 PM    

@Claudya
Glad to have helped. Come again.

JaceWong July 28, 2010 at 12:34 PM    

hey there! can i ask how do you add blogcounters & shoutbox to the new blog templates? i tried like a million times..
Hope you could help =)

Greenlava July 29, 2010 at 8:41 PM    

@JaceWong
Blogcounter
1. Go to StatCounter.com, register, configure your counter and copy the given code.
2. Go to Blogger Dashboard > Design > Page Elements and click Add A Gadget link in the sidebar.
3. Select HTML/Javascript gadget and paste the code in the content box.
4. Save and view blog.

Shoutbox
. Go to ShoutMix, register and configure your box.
2. Copy and paste the code in a HTML/Javascript gadget too.

momocsst July 31, 2010 at 1:21 PM    

I am so confused. I tried to follow the instructions but my blog only looks worse now. I think I messed it up because I was looking at instructions from other blogs and then I googled it for instructions for the newer blogs and now it looks all wrong. There's this image that I found and tried to upload it from my photobucket. But it doesn't work. I have like two images on my blog background. One on top and then this other image at the bottom. Please help! I'm so confused with this blog stuff. Lol, but any instructions would help!

Greenlava August 1, 2010 at 8:00 AM    

@momocsst
To rid of the top blue mask, just add code line 2 in the CSS editor.

Tara August 4, 2010 at 2:39 AM    

This does not work for me either and I followed the directions to a t. what's wrong w/this:
body {background: url(http://farm5.static.flickr.com/4096/4857747336_629485de14_b.jpg) center fixed;}
.body-fauxcolumns .fauxcolumn-outer div, .body-fauxcolumn-outer .cap-top .cap-left {background:none;}

Greenlava August 4, 2010 at 8:16 AM    

@Tara
Which blog are you referring to? The Vinyagelove blog uses Layout template and besides I don't see any of those codes inside your template.

Theodore August 19, 2010 at 8:48 AM    

hello:
Thank you in advance.
I'm trying to follow your steps for having my own foto be the back ground image. When i go to my dashboard to select "Blogger in Draft", there is no tab "Blogger in Draft". blogger buzz and blogs of note but no blogger in draft.
i can't even get thru this first step. also, i would like to use one of my own fotos, from my files. do i have to use flicker, fotobujcket, or etc.?

Deaudrick W. August 19, 2010 at 1:39 PM    

My background is like all white now. I put the code in the css.. I need help though

Greenlava August 19, 2010 at 2:26 PM    

@Theodore
"Blogger in Draft" in step 1 above is clickable. Click it to open Blogger In Draft in a new window.
The steps above will upload your photo from your pc to Blogger.

Greenlava August 19, 2010 at 2:49 PM    

@Deaudrick W.
Looks okay to me now. It seems you've fixed it.

momocsst August 22, 2010 at 2:28 PM    

@Greenlava AHH! Thanks so much (: My blog looks so much better now! So if I wanted to change my background image again do I leave the code there in the CSS box?

Greenlava August 22, 2010 at 4:29 PM    

@momocsst
Yes, just leave it there.

Allie August 23, 2010 at 7:30 AM    

Ok, this would be fabulous if it worked. When I go to the Template Designer it does not give me the option shown in the picture to upload my own image. I have tried all of the template options. It is simply not an option in my dashboard. Am I missing something?

Greenlava August 23, 2010 at 9:29 AM    

@Allie
Make sure you start off by going to Blogger In Draft- http://draft.blogger.com/
(signified by blue Blogger logo, instead of the usual orange)

Linda Facci August 24, 2010 at 2:28 AM    

I cannot tell you how easy it was to upload my own background once I read your directions and all the comments...I tried to do this through blogger directly, but couldn't get it to work. Anyhoo...thank you so much for posting!! Now I have to figure out what I want!

Linda Facci August 24, 2010 at 3:34 AM    

If I wanted one background picture and not a repeat, how large (?x? )should that picture be?

Greenlava August 24, 2010 at 2:06 PM    

@Linda Facci
How your background image shows up (whether it fills up the screen or not) depends on each of your reader's screen resolution. So I'm not going to tell you what is the best image size, instead you can check the latest screen resolution statistics from w3schools and decide for yourself :)

an.z August 24, 2010 at 4:29 PM    

Its work. Thanks ! (:

Kristie August 30, 2010 at 1:17 PM    

I just tried this in Blogger in draft mode and only the top half of my image is showing and the bottom half of the screen is still as it was before. Any tips on how i can fix it would be great. Thanks :)

Greenlava August 30, 2010 at 3:01 PM    

@Kristie
I notice you added a background code inside a HTML/Javascript gadget. First you need remove that, then apply the background by following this tutotial.
This url (I assume you want to use this image as your background): http://j.imagehost.org/view/0199/Glitzy_Bitz_Blog_Background_edited-1
won't work because it is not a direct link. A direct link usually ends with a image file type i.e. jpg, png or gif.

Natalie,  September 1, 2010 at 5:11 PM    

Hi, I'm using the Simple Template, how can I change the main background (the centre column background) to an image instead of just a colour?

Greenlava September 1, 2010 at 8:26 PM    

@Natalie
Use this code:
.content-inner {background: ColorCode url(YourImageUrl) no-repeat center fixed;}

Cracksevens September 2, 2010 at 6:48 PM    

greenlava..border aq cam light sgt tp style sbb ade shadow..camne ek nak bg gelap skit color border tuh?
www.cracksevens.co.cc

Greenlava September 2, 2010 at 8:01 PM    

@Cracksevens
Go to Design > Edit HTML and find this:
.content-outer {
-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
margin-bottom: 1px;
}

replace .15 with a larger value. The max value is 1 (darkest, fully opaque).

Janet Botes September 17, 2010 at 7:33 PM    

Thank you very much, your post was very helpful and easy to follow! :-)

Not So Glamorous...Yet! September 20, 2010 at 12:43 PM    

I have read everything you have written but am still having problems with my blog: http://mynotsoglamourslife.blogspot.com/

I just want to use a picture I have on my computer as my background. I've tried to go in and use the CSS function and I've tried to upload a picture through Template Designer. Any suggestions would be welcome. Thanks!

Greenlava September 20, 2010 at 4:36 PM    

@Not So Glamorous...Yet!
Two mistakes:
1. The cutest blog image link doesn't work. The image is nonexistent. That's why the image doesn't show up.
2. You put the cutest blog code in your posts (4 of your latest posts). You should've put the code (that works) in a HTML/Javascript gadget.

What to do:
Remove the cutest blog code from your posts, all 4 of them. You should be able to see the library background once done.

Not So Glamorous...Yet! September 20, 2010 at 8:50 PM    

Thank you so much! I knew that link was causing issues haha

Anonymous,  September 22, 2010 at 2:50 AM    

Hi,
I have followed the steps, but my background photo seems to alter the menu bar, not the blog background. Can someone assist me please?
www.pearlpainting.blogspot.com

Anonymous,  September 22, 2010 at 2:50 AM    

SORRY!! it's pearlpaintingsf.blogspot.com

Greenlava September 22, 2010 at 10:53 PM    

@Anonymous
You mean the menu on top of the screen? That's the navbar.
Try this:
1. Go to Design > Template Designer > Background.
2. Under "Background image" heading, you'll see a thumbnail of your uploaded image. On the right of the image there are two dropdowns. Click the second one and choose "Tile".
3. Lastly untick "Scroll with page" checkbox.

Is that what you want?

Momo October 3, 2010 at 12:52 PM    

Okay, so I'm trying to change my background and it showed up but the body of my blog is still the same as my last blog, how do I change that?

Momo October 3, 2010 at 1:07 PM    

Okay, scratch that last comment. I fixed it!

Nakamuras on Saipan November 14, 2010 at 9:12 AM    

Won't work for me either- when I click the background drop-down menu I do see "upload an image" but when I click on it-nothing happens. There is no window that opens up that lets me upload an image from my computer. Should there be an upload window or not? Can't figure this out at all.

Greenlava November 14, 2010 at 9:54 AM    

@Nakamuras on Saipan
Have you clicked the Browse button?

[A] January 23, 2011 at 2:40 AM    

I wanna do, tell me if it's possible: I use some .png in my blog that's transparent so it doesn't matter if I change the colours, it always look the same (it's just a small picture and text coming from it). I set it to be always on the lower left corner, using the backgrounds "controls when you upload your image.

What I'd like to do is be able to use one of blogger walls and still be able to use my little "signature" .png -- is it possible? I'd say no but maybe you css experts can help an ignorant ;)

Greenlava January 23, 2011 at 8:23 AM    

@[A]
I answered similar question yesterday, see it here.

Santiago February 27, 2011 at 5:25 AM    

Thank you so much! I knew that link was causing issues haha

Mary October 28, 2011 at 11:29 AM    

Hello,
Hoping that you can help. I am trying to change the background image to my blogger page and have followed your css directions to a T. ???

becauseiliketodecorate.blogspot.com

this is what I have placed in css:
body { background-image: url(http://i57.photobucket.com/albums/g207/dmspitzer/iStock_000016414400Small.jpg);}

Greenlava October 28, 2011 at 7:03 PM    

@Mary
There's another background code further down in the HTML that's overriding that code. Find this:

[style type='text/css']
body { background-color: #F0F1F1; background-image: url(http://2.bp.blogspot.com/-c6O_G5UJoD8/ThFNT7d-2tI/AAAAAAAAA9g/TPPAq3zEA6M/s000/bg.jpg); background-repeat: no-repeat; background-position: top center; background-attachment: scroll; }
[/style]

remove it and the new background will appear.

One more thing I notice "Undefined" on what supposed to be post date.? Try this: go to Settings > Formatting > Timestamp Format and change to this format -Friday, October 28, 2011.

I Love you :) Thanks so much for your help! Everything worked just as you said. I am bookmarking your page for future needs/questions.

Regards,
Mary

prĂ©presse November 17, 2011 at 8:52 PM    

Really working nice...

Laura Kemp December 30, 2011 at 10:44 AM    

THANK YOU!

Anonymous,  December 31, 2011 at 11:42 AM    

HI, this instructions are so helpful... I've been looking for something like this for a long time... finally able to change my background on the new blogger backgrounds... thanks! one questions thought... my background is showing up tiled or duplicated instead of taking the full page. how can i change this? here is my blog: http://www.dreamfairlyland.blogspot.com.

thanks for helping me with this issue

Greenlava January 1, 2012 at 2:37 AM    

@Anonymous
Go to Template Designer > Background and set the Background Image to "Don't tile".

Anonymous,  January 1, 2012 at 5:45 AM    

Hi... when I chose "don't tile" the background dissappear... ;(

Cielo

http://www.dreamfairlyland.blogspot.com

Anonymous,  January 1, 2012 at 9:24 AM    

First off, thanks so much for posting this! I'm learning html by trial and error (mostly error) and it's great to have walkthroughs to make me more comfortable and familiar with what I'm doing.

But this isn't working. :(

I can't get anything at all. I'm using the Simple Template and the blog I'm working with is katie-did-blog.blogspot.com.

Can you take a peek? Thanks so much!!

Katie

Anonymous,  January 1, 2012 at 9:28 AM    

I went through it all again and I just have a plain white background. :(

Greenlava January 1, 2012 at 12:49 PM    

@Anonymous
You're missing a semicolon after the background image code:
background-image:url("http://i1215.photobucket.com/albums/cc506/katiedid1212/jss_sojordan_paperdotsred.jpg")

adding a semicolon should fix the problem.

Greenlava January 1, 2012 at 1:03 PM    

@Anonymous (http://www.dreamfairlyland.blogspot.com)
It's hidden at the back. That's because the image is small (657 x 527px). A background doesn't stretch so if you want to occupy larger area you need a larger picture.

Alexis January 1, 2012 at 1:15 PM    

*Hallelujah Chorus*

Thanks SO SO SO SO SO much!!!!! It's so great that you're helping others figure things like this out! Happy New Year!!

CIELO January 3, 2012 at 7:23 AM    

Hi, and thank YOU for all your help! I have done everything you told me and still not getting my background right... I spefickly went to the web and downloaded a background image (1800x1600) as required, and I'm getting a message that's says: Sorry, your file is too big. My images are either too small (not taking the full screen, or blogger not accepting because is too large. What's the right size then?

http://www.dreamfairyland.blogspot.com

thanks again

Greenlava January 3, 2012 at 11:43 AM    

@CIELO
Make sure the filesize is not larger than 300KB.

Anonymous,  January 4, 2012 at 12:32 PM    

Oh, this is so frustrating!!! I tried to do this on another design, and I'm still getting something wrong here. I know I'm probably missing another semicolon somewhere, but nothing that I try is working. This blog is cyndisstory.blogspot.com...and ignore the messy header. Working on that now!!

Katie

Greenlava January 4, 2012 at 4:40 PM    

@Katie
You have 2 problems:
1. The code. This is your current background code:
body {background: 66BDD1 url(http://i1180.photobucket.com/albums/x416/crochetcrazymom/MBS_Jules-4.jpg); no-repeat center fixed;}

the correct code should be like this:
body {background: #66BDD1 url(http://i1180.photobucket.com/albums/x416/crochetcrazymom/MBS_Jules-4.jpg) no-repeat center fixed;}

2. The image. The URL (http://i1180.photobucket.com/albums/x416/crochetcrazymom/MBS_Jules-4.jpg) doesn't load any image. You need to check the URL or try with another image.

Time 4 Kindergarten January 16, 2012 at 11:20 AM    

So glad I found your site. Not sure if you will be able to help, but here goes. I made my background in photoshop and use the template designer to upload it to blogger *love that I don't need photbucket to host) but I can't seem to figure our how wide to make th background. Depending on what I select in template designer tile- no tile... I get different views of my blog. As of now I have too much space on the sides.

So what do I need to do to fix this
tiffanistestblog.blogspot.com

Hi, sorry to bother you. This question is about a blogger background, but how can you make one clickable. I have been looking for a way to make my blog background clickable. I would like to make it where if someone clicks on my blogs background it will direct them to another page. I would really like to do this. Is there a way. Please help.

Greenlava March 27, 2012 at 9:52 AM    

@Blog This Link
You cannot make a background clickable.

Naomilophotos April 28, 2012 at 12:43 AM    

I followed all your instructions but somehow it doesn't work! All I get is a white background, although it says that my background displays the background chosen!
Thanks in advance!

Greenlava May 1, 2012 at 2:01 AM    

@Naomilophotos
The picture is there in the background alright, but what is visible is the background of the image which is white. The subject (a girl) is out of the viewing range because the picture is too big. Press Ctrl+[-] keys repeatedly to zoom out, you'll eventually see the girl.

Anshul Madnawat May 10, 2012 at 10:53 PM    

thanxxx bro

Anonymous,  May 21, 2012 at 3:10 AM    

Your information is not entirely correct. The new Blogger template designer allows you to upload your own image with basically one click.

Chweeto ;) May 28, 2012 at 8:13 PM    

ignore my above comments, just take in account only this one.

you can upload a JPG,GIF or PNG file upto 300k in size.
for a full background, use images 1800x1600 or greater.

^^ its directed over there.
but when I am trying to alter the size of an image the file size exceeds 300k.
help me.

Greenlava May 30, 2012 at 12:04 AM    

@Chweeto ;)
I guess your only option now is to reduce the file size (without shrinking the image). Try this tool:

http://tools.dynamicdrive.com/imageoptimizer/

It will reduce image quality though.

Scyla Cassandra Gacis August 25, 2012 at 8:19 PM    

THANK YOU SO MUCH! This really worked for me :)

Anonymous,  September 4, 2012 at 12:40 AM    

I have a private blog on Blogger. For some reason, when I try to use the Template Designer and save/apply changes, it will not save! Help?

uvebana September 23, 2012 at 11:00 AM    

Thanks for your sharing tips, I'm new in blogger..

Remove Background October 5, 2012 at 6:34 PM    

Nice Post. This is really very good article. I am really apreciated to share it with us. Thanks!!

Gary Hill October 22, 2012 at 12:26 AM    

Thanks for the simple and effective instructions

Dany,  November 7, 2012 at 7:31 PM    

Hi!

I 've tried to put an img in the main bakcground (center column) as you told to 'Natalie' using this code:

.content-inner {
background: ColorCode url(YourImageUrl) no-repeat center fixed;
}

But it dind't work. Is like if i change to 'transparent' instead of img, the background dissapears. Could you help me?

Thanks :)

Anonymous,  January 5, 2013 at 4:31 AM    

-.- I'm using another template designer website instead if this...
ATLEAST I THINK IT"D WORKKK!

KINGRPG April 5, 2013 at 4:59 AM    

I like this background tips

iva yaneva June 21, 2013 at 10:32 PM    

Thank you so much!! I couldn't upload my image through blogger's interface for some reason. But I tried your suggestion and it worked like a charm! Can't believe I wasted an hour of my life trying to figure out what's wrong!

Click to go to top Click to comment