Pages

How to Add Your Own Image as Blog Background in the Template Designer

Add Your Own Image As Background in the Template Designer

The most special thing about Blogger-Blogspot is personalization and ease of use. People love to have a personal image as their blog background. You can see my previous tutorial which makes it fairly easy to add an image as blog background in the older Blogger-Blogspot templates (also called layouts). Now, you can design your very own templates with the new Template Designer. But you can't add your own image as background without knowing HTML and CSS. So, in this tutorial, I'll try to make it very simple to add your own image as blog background.

Things to Do in This Tutorial


So, we need to do 3 different things in this tutorial which are:

1- Select an image from your computer or web.
2- Upload your image on Blogger-Blogspot.
3- Add the uploaded image as blog background.

1- Select an Image From Your Computer or Web.


First of all you've to select an image either from web or your computer. If you like some image on the web then it is better to save that image on your computer. If you've a professional blog then go for a pattern (Download Patterns) as background otherwise personal bloggers might wanna add their personal image as blog background.

2- Upload Your Image on Blogger-Blogspot.


The most convenient way to upload an image on web is to upload it to your Blogger-Blogspot blog. Blogger provides each user 1gb free space so use it. Here is a tutorial to upload your images on Blogger:

How to Host Images on Blogger

After uploading your image on Blogger-Blogspot, make sure to copy the address/URL of your uploaded image because that will be used later.

3- Add the Uploaded Image as Blog Background.


I'm assuming that you've uploaded your image and you've the address/URL of your uploaded image. Now go to Design then Template Designer. From the left column select Advanced and then chose Write CSS. You can click the following image for help:


In the box there, we can add our custom CSS code. So, you need to add the following code in that white box:

body { background: url(URL of Image you uploaded in step 2); background-color: none; }
.body-fauxcolumn-outer div { background: none !important; }


If you're using a pattern then the above code will work great. However, if you're using a big image then you need to take care of the alignment as well. The code for an image will be something like this:

body { background: url(URL of Image you uploaded in step 2) no-repeat scroll top left; background-color: none; }
.body-fauxcolumn-outer div { background: none !important; }


There are 4 things in the code above, let me introduce them to you.

1- no-repeat


It makes sure that the large image doesn't repeat itself. You can change it to repeat if you want to repeat your background image.

2- scroll


You might have noticed that the background image also moves when you scroll down your blog. If you want the background image to stay still in the background then you can change scroll to fixed.

3- top


Top is indicating the vertical positioning of the background image. You can change the vertical positioning to center or bottom.

4- left


Left is responsible for horizontal positioning of your background image. You can also change this value to center or right.

Final Thoughts


I've tried my best to make the HTML and CSS stuff easy for you guys. however, if you still feel any difficulty, feel free to leave me a comment. You can also refer to an official tutorial provided by Google about adding custom CSS in Template Designer.

79 comments:

  1. Thank you..I tried using pictures in picasa but that doesn't seem to work...any tips?

    ReplyDelete
  2. @ Aparna Radhakrishnan, at which stage you're stuck? Have you been able to upload your image but can't add it to the blog background? Or you can't upload your image?

    ReplyDelete
  3. I have uploaded images in Picasa.

    I tried using the link to photo in picasa for uploading on to my blog...and that doesn't seem to work. Then I thought the reason might be that the album is unlisted, so I made that public and tried again but in vain :(

    ReplyDelete
  4. @ Aparna Radhakrishnan, why don't you upload and host images on your Blogger account?

    http://www.betatemplates.com/2009/06/use-blogger-upload-host-images.html

    ReplyDelete
  5. Thanks, this has been a big help. I was using WordPress and having a heck of a time with it, I decided to switch to Blogger but it's still hard when you're new to all this stuff. Your help has really facilitated my use of Blogger. Much appreciated!

    ReplyDelete
  6. How to stretch the uploaded picture to encompass the whole web page?

    ReplyDelete
  7. @ Sainath, a background image cannot be stretched, however it can be repeated both horizontally and vertically. Another thing we can do is to fill the empty part with some color.

    ReplyDelete
  8. it dosent seam to work for me but its ok

    : )

    ReplyDelete
  9. @ ben pierre, don't worry, you're using Tina Chen's Awesome Inc. template and I wrote the above tutorial regarding another template. Just follow the first 2 parts of the tutorial. In 3rd part, you have to add this code in the Add CSS tab:

    body {
    background: #221e1f url(URL or Address of the image will come here) repeat fixed top center; }


    After that, you can adjust the alignment settings explained in the tutorial.

    ReplyDelete
  10. @ Aparna Radhakrishnan

    Hi Aparna, make sure your code looks like..

    body { background: url(https://yourimagepath.jpg) no-repeat fixed top center; background-color: none; }
    .body-fauxcolumn-outer div { background: none !important; }

    -- those brackets for the path also mandatory

    ReplyDelete
  11. Very much Thanks for the post !!

    ReplyDelete
  12. Hi,
    Thanks for the tutorial, but the alignment is not working properly for me. I have a huge image (3872x8000) that I've custom made as a background, but when I try to make it no-repeat, fixed, top, and center, the image somehow goes up off the blog and ends up being seen through the topbar... Kinda strange. I'm using the Simple template. I'm kind of confused as to how the vertical positioning works exactly. What does the "top", "bottom", or "center" of the image align to?

    ReplyDelete
  13. @ Jesse, create a test blog, apply this tutorial on that blog with the image and then gimme the address of that test blog.

    ReplyDelete
  14. Thank you! I tried this and it worked.

    http://tricotgirl.blogspot.com/

    ReplyDelete
  15. Thank you this helped so much!! I was having a hard time overriding that Simple template background.

    ReplyDelete
  16. Thank you so much for this post it helped me a lot! I had been trying to add background picture to a certain template and I didn`t understand what i did wrong. I realized that I needed that CSS code. : D Now everything works well, thanks <3

    ReplyDelete
  17. I created a custom background for my blog. I tried using the code for large images. My image is about 1250X1250 pixels. Nothing happens when I try this.

    ReplyDelete
  18. Nevermind! I tried it one more time and it worked! Thanks so much, it looks great.

    ReplyDelete
  19. How do I make the middle section invisible to see the entire photo behind the blog posts?

    Also, what size image fills the space perfectly? The size I was using in old templates seems too big for this one?

    Thanks!!!

    ReplyDelete
  20. @ Lisa, please download and send me your template file with your question:

    levisinside0@gmail.com

    ReplyDelete
  21. Hi! I have tried this but it still won't work- it comes up with nothing on my background! Could I send you my template and maybe you could see whats wrong?

    ReplyDelete
  22. @ honestlybec, yes please send me your template with the question in detail, thanks!

    ReplyDelete
  23. thanks so much-i've been tearing my hair out over this for 2 days.

    ReplyDelete
  24. Hi! I want to use the background picture from the blog itself but then add another pic i drew by myselt to the top left hand corner but everytime i add the css of my image, the background disappears =(

    ReplyDelete
  25. Thank you so much!!! I've been researching this online and your method was the simplest and worked best. Many thanks.

    ReplyDelete
  26. @ Froggy's Pantry, what template are you using? Gimme the address of your uploaded image? In which part of the blog, do you want that image to appear?

    ReplyDelete
  27. Thanks a bunch, spent this afternoon following numerous instruction and these were the winner. You rock!

    ReplyDelete
  28. Hey - I am trying to get my header image to fully display on the blogger simple template. Part of it is cut off. Do you know the CSS on how to adjust the width?

    ReplyDelete
  29. @ Elisa, mail me your header image and detailed explanation of image positioning i.e. draw a MS Paint file and send it to me:

    levisinside0@gmail.com

    ReplyDelete
  30. Thanks, I figured it out. I had to go into the template designer and pick the last (farthest to the right) simple template and just adjust the width so that it lined up.

    ReplyDelete
  31. Thanks.. it was really helpful.

    ReplyDelete
  32. after copying the css script use arrow keys to make the blinker go over the script once.

    ReplyDelete
  33. I tried it step by step, by nothing happens to my blog.. I am using template designer, simple, the farthest right, and I wand to use this background, but it didn't work, its just appear transparent, grey transparency for my blog.. It did mentioned template applied, but its still not changing. Here is the background image that I want to use; http://www.mycutegraphics.com/backgrounds/flowers/flower-background54.html

    ReplyDelete
  34. @ pranaya, new Blogger templates now offer this feature by default, so please try that.

    ReplyDelete
  35. @ Miss Baker, just save this image on your computer from here:

    http://www.mycutegraphics.com/backgrounds/flower/flowerbg54.gif

    After that open the Blogger Template Designer and click Background from the left column. There you'd find an option to upload your own image.

    ReplyDelete
  36. where should i upload the image? which place in the blogspot, im still confius..i just want to make a new blog, so it dont exist yet..

    ReplyDelete
    Replies
    1. You don't need to, because now Blogger gives an option to upload your own image.

      Delete
  37. Thankyou so much for this! Would never have worked it out on my own.

    ReplyDelete
  38. if i already have a template downloaded for my blog but i just want to change the background to my own image, what should i do with it?

    ReplyDelete
  39. I've downloaded a free template and using it for my blog but i dont know how to edit the html to change fonts of title header etc.PLEASE HELP ME....

    ReplyDelete
    Replies
    1. @ Anonymous, please mention your blog address.

      Delete
  40. Omg , I can't understand nothing . Where I upload it ? Have I must copy this code ? I cant understand NOTHING :( ..

    ReplyDelete
    Replies
    1. Hi Lenzuuu, you don't need to do this tutorial. Blogger provides a default way to upload image in the Template Designer.

      Delete
  41. I uploaded a large photo that I assume would fill the screen on the picture window template, but it just replaces the default image with a small image in the middle of the screen. Is there a way to get a large image to fill the entire background like your example at the very beginning of this post? My image is 2592x1944.
    I have also tried to upload the photo through the template designer, background option, but regardless of how I follow the directions (photo smaller than 250k, larger than 1800x1600), the image is tiled, it will not fill the entire background. It is so frustrating.

    ReplyDelete
    Replies
    1. Hi Canyon Heights, please send me your template file and that image.

      levisinside0@gmail.com

      Delete
  42. I cant even get past uploading my image for my background. I have changed the size of it, and it keeps telling me its too big. So annoyed.

    ReplyDelete
    Replies
    1. Hi Candace, please send me your template as well as that image, I'll have a look at it:


      levisinside0@gmail.com

      Delete
    2. It happens to me the same thing that happened to Canyon Heights above ;)the image is tiled, it will not fill the entire background. I would like it to fill the entire background, no spaces left...

      Delete
  43. If you can not stretch a picture .... Can you make it bigger and after the background image will be fitting all the page? I managed to post my background image...But i would like it to fit the whole page....

    ReplyDelete
    Replies
    1. Hi Kate, please send me your template as well as that image, I'll have a look at it:


      levisinside0@gmail.com

      Delete
    2. Hi Bilal, I have the same problem here with stretching the image to the whole page.

      Delete
    3. @ spravne, please email me your template file with your question:


      levisinside0@gmail.com

      Delete
  44. Hi Bilal, thanks for this wonderful tutorial you made. I've been making some blog backgrounds on photoscape and I had no idea how will I'm going to upload the picture since I don't have an Flicker or Photobucket account. Super Thanks to you! this helped me a lot!

    ReplyDelete
  45. Um, I don't really get the URL part. So what are we supposed to paste on the advanced thing? Are we supposed to erase the extra information you included in the URL you gave us to copy?

    ReplyDelete
    Replies
    1. Mr./Ms. Anonymous, Blogger, by default, offers to upload image as background. Try that. Otherwise for customization, you can contact me for premium service.

      Delete
  46. What if I want to position the image somewhere on the page besides top left or top right?

    ReplyDelete
    Replies
    1. Hi jHenry, that can be done but where do you want to place the image?

      Delete
  47. Thank you so much for this!

    ReplyDelete
  48. Thank you so, so much. I just spent three hours trying to do this on my own but your directions only took me about thirty minutes to figure out! Many thanks as I begin my blogging endeavor.

    brokenpoverty.blogspot.com

    ReplyDelete
  49. Hi,
    I've tried your tutorial all day, but I just cannot get it to work! I really don't know what I'm doing wrong---I'm copying your code into the CSS box, uploaded my image, got the URL, posted the URL in the appropriate box. I'm confused. I know its me, but I just can't figure out what I'm doing...
    My blog address is maestra-amanda.blogspot.com, if you'd like to check it out and give me a little help! I'm also trying to figure out how to resize my blog header. I think its too wide and not long enough.
    Thank you,
    Amanda

    ReplyDelete
    Replies
    1. Hi Amanda, you are using a customized template and it is not possible to write a tutorial that works with every template. You can hire me for this customization. Contact me:

      levisinside0@gmail.com

      Delete
  50. Thank you for the tutorial, it was very clear and helpful
    but I have a strange problem - I can see the background on my blog as long as I'm logged into my account, everyone else sees my blog without a background. Do you have any idea? Would appreciate your advice.
    Amalia

    ReplyDelete
  51. Hi Amalia, have you uploaded the background image somewhere? If yes then please provide its URL/Address.

    ReplyDelete
  52. Thank you so much for this guide! I'm looking forward to learning new ways of sprucing up my blog :)

    ReplyDelete
  53. Great post. So easy to use and follow. Made my blog look great. Thanks heaps. M x

    ReplyDelete
    Replies
    1. Hi Madeleine, thanks for liking this tutorial. Kindly link back to this blog.

      Regards,
      Bilal

      Delete
  54. I've tried so hard to do it, but i cant't but my foto as a background in my blog. To be more specific i firstly pasted tis in the CSS area

    body { background: url(http://4.bp.blogspot.com/-kL66Wnly2eM/UY570rHHxdI/AAAAAAAAB2s/XMaIilG6qz4/s1600/DSC06931.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;) no-repeat scroll top left; background-color: none; }
    .body-fauxcolumn-outer div { background: none !important; }

    And then i saw in some comment of the above some other codes and i pasted this

    body { background: url(http://4.bp.blogspot.com/-kL66Wnly2eM/UY570rHHxdI/AAAAAAAAB2s/XMaIilG6qz4/s1600/DSC06931.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;) no-repeat fixed top center; background-color: none; }
    .body-fauxcolumn-outer div { background: none !important; }


    Can you,please , help me...?

    ReplyDelete
    Replies
    1. Hi Joanna, you can hire me to fix this issue. Please contact:

      levisinside0@gmail.com

      Regards,
      Bilal

      Delete