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,
- 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.
- Login to your Blogger account.
- Go to Dashboard > Design > Template Designer.
- In Blogger Template Designer page click Advanced. Then scroll down the submenu and click Add CSS.
- 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
ColorCodewith the color code of the prevailing color of your image. - Replace
YourImageUrlwith a direct link to the image. - For a repeated, tiled image effect, remove
no-repeatfrom code line 1.
- Replace
- Hit Enter key and the changes you make will be shown instantly in the live preview beneath the editor.
-
If you like the result, click the orange Apply to Blog button to save.
-
That’s it. Enjoy!
Uploading your own background image via Blogger In Draft
(added August 2010)
Switch toBlogger In Draft.- Go to Design > Template Designer > Background and click the dropdown button under Background Image heading.
- Click Upload Image button on top left corner of the pop up.
- 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!
103 comments to "Template Designer: How to use your own background image"
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.....
@Whimsical online
Post whatever link you have here, we'll figure out the direct link.
This does not work at all for me.
@Kelly
Which blog are you applying the background to? I saw your blogs, none of them are Template Designer's.
Itdoesn't work for Simple template. Only the lower part of it changes. :(
@Anonymous
Code fixed. It should work on all templates now.
HI!
I have followed the directions but all I get is a white background. Please help! :)
Melinda
@Anonymous
What is your blog URL?
I got it... :)
thanks anyway...
Melinda
It repeats. How do I make it one big image?
@surfinsarah1590
Just add "no-repeat" to code line 1, like this:
body {background: url(YourImageUrl) no-repeat;}
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?
@Brennon
A background image displays itself in its original size, can't change that.
To display big, you need big image.
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.
@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.
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?
@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.
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;}
@K.H.
Try hitting the Enter key after pasting the code.
I have an obvious way of missing the obvious. Thanks.
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?
@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;}
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?
That is, I am wondering if I can make a kind of emailing list.
@K.H.
I believe subscribing is the only way to achieve that.
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/
@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.
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.
@The American Homemaker
I see you've had it fixed.
Ty for the css code! Works great. xo
@Claudya
Glad to have helped. Come again.
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 =)
@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.
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!
@momocsst
To rid of the top blue mask, just add code line 2 in the CSS editor.
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;}
@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.
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.?
My background is like all white now. I put the code in the css.. I need help though
@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.
@Deaudrick W.
Looks okay to me now. It seems you've fixed it.
@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?
@momocsst
Yes, just leave it there.
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?
@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)
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!
If I wanted one background picture and not a repeat, how large (?x? )should that picture be?
@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 :)
Its work. Thanks ! (:
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 :)
@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.
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?
@Natalie
Use this code:
.content-inner {background: ColorCode url(YourImageUrl) no-repeat center fixed;}
greenlava..border aq cam light sgt tp style sbb ade shadow..camne ek nak bg gelap skit color border tuh?
www.cracksevens.co.cc
@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).
Thank you very much, your post was very helpful and easy to follow! :-)
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!
@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.
Thank you so much! I knew that link was causing issues haha
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
SORRY!! it's pearlpaintingsf.blogspot.com
@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?
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?
Okay, scratch that last comment. I fixed it!
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.
@Nakamuras on Saipan
Have you clicked the Browse button?
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 ;)
@[A]
I answered similar question yesterday, see it here.
Thank you so much! I knew that link was causing issues haha
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);}
@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
Really working nice...
THANK YOU!
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
@Anonymous
Go to Template Designer > Background and set the Background Image to "Don't tile".
Hi... when I chose "don't tile" the background dissappear... ;(
Cielo
http://www.dreamfairlyland.blogspot.com
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
I went through it all again and I just have a plain white background. :(
@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.
@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.
*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!!
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
@CIELO
Make sure the filesize is not larger than 300KB.
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
@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.
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.
@Blog This Link
You cannot make a background clickable.
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!
@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.
thanxxx bro
Your information is not entirely correct. The new Blogger template designer allows you to upload your own image with basically one click.
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.
@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.
THANK YOU SO MUCH! This really worked for me :)
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?
Thanks for your sharing tips, I'm new in blogger..
Nice Post. This is really very good article. I am really apreciated to share it with us. Thanks!!
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 :)
-.- I'm using another template designer website instead if this...
ATLEAST I THINK IT"D WORKKK!
I like this background tips
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.