UpdateSeptember 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.

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.

Once the image is displayed (uploaded), click Done.

Set the background’s alignment, tiling and scrolling.

Click the orange Apply To Blog button when you’re done.

That’s it, enjoy!

Enjoyed this post?Be sure to subscribe to get regular updates delivered to your email inbox, for free.

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

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

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?

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/

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.

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!

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;}

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.?

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?

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 FacciHow 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 :)

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 :)

@KristieI 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-1won'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?

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!

@AnonymousYou 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.

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.

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 ;)

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.

@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.

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?

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!!

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.

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.

@NaomilophotosThe 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.

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!

Comments on this post are closed. I am for hire if you need personalized help.