How to Add Image as Blog Background

We can easily add a background image in a Blogger/Blogspot blog. To add an image as your blog background, first of all you need to do 3 things:

1- Select an image.
2- Upload it.
3- Add it to your blog HTML.

1- Select an Image


This is a fairly simple thing, you can either chose an image wallpaper from your computer or web. Of course, if you're selecting a full wallpaper then it will be quite heavy in size and eventually your blog will take too much time to load.

I recommend you to use a pattern instead of a large image. A pattern is also an image but it has a very small size and it is repeated in the blog background. We can use it to cover whole background through a CSS background property which will be explained later.

Tip: Go to Din Patterns to download high quality patterns for your blog background.

2- Upload it


I assume that you've already selected an image or a pattern and now we need to upload it on some image host. Fortunately, Blogger provides each user 1Gb free space to store images which is more than enough, so just upload your image on Blogger and then come back.

How to Host Images on Blogger

3- Add it to your blog HTML


I'm assuming that now you've completed the previous two steps and we're ready to move on. Now, you need to follow these simple steps to complete this tutorial:

1- Go to Design -> Edit HTML and find:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}


You might not be able to find the exact above code but you'll definitely find some code of this form:

body {
.
.
.
Some Code Here
.
.
.
}


2- Once you've found the above mentioned code, you need to add following code in it:

background-image:url(URL of your image from step 2);
background-repeat: repeat;
background-attachment: fixed;


Please note that this code is only for adding a pattern, if you're adding a large image, please see the heading Aligning Background Image later in this tutorial otherwise continue from here. After adding the code mentioned in Step 2, overall code should look something like this:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-image:url(URL of your image from step 2);
background-repeat:repeat;
background-attachment: fixed;

}


3- Replace URL of your image from step 2 with your uploaded image URL which you uploaded above in this tutorial.

4- You can also try changing background-attachment: fixed; to background-attachment: scroll;. This way, your background will also move when you scroll your blog but I won't recommend doing this.

Aligning Background Image


If you've added a background image (not pattern) then it's very important to align it correctly. Here is the code to add an image in the background:

background-image:url(URL of your image from step 2);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;


Overall, the code should look something like this:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-image:url(URL of your image from step 2);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;
}


As you can see, I've changed the code a bit by changing repeat to no-repeat and also adding Background Position property. The no-repeat will make sure that our image doesn't repeat itself. The Background Position property has 2 parameters which define horizontal and vertical positioning of an image. In the above code, horizontal position is left and vertical position is Top so our image will be placed according to these parameters. Here is a list of possible parameters of Background Position property.

background-position: left top;
background-position: left center;
background-position: left bottom;

background-position: right top;
background-position: right center;
background-position: right bottom;

background-position: center top;
background-position: center center;
background-position: center bottom;


Final Thoughts


People love personalizing their blogs and adding an image in blog background surely adds more personalization in a blog. This is the most famous tutorial on Beta Templates and I'm thankful to you guys for that.

68 comments:

  1. I am looking to determine if I can place my background image down just the left border and the right border.

    I added the follwoing to my template and a column of my image down only the left hand side of my screen:

    background-image:url(URL of your image);
    background-repeat:repeat-y;
    background-position:0% 100%;
    background-attachment: scroll;

    Any suggestions?

    ReplyDelete
  2. Totally didn't understood your question, can you please take a screen shot and give it to me?

    ReplyDelete
  3. Your site is AWESOME! I think your tutorials are clear and very helpful! Thank you for providing this high quality information! I appreciate it!

    ReplyDelete
  4. for some reason your instructions on using Blogger for hosting didn't work. when i pasted the link in step 3, it wouldn't work. my Photobucket link worked though. otherwise it worked perfectly! thanks!

    ReplyDelete
  5. Hi coolhandjhony make sure when you paste the image URL, it doesn't contain "s1600-h" otherwise the image might not show...

    ReplyDelete
  6. This worked perfectly THANK YOU!!

    ReplyDelete
  7. awesome! Thank you so much for this info, I would have NEVER known how to do this. It worked great!!

    ReplyDelete
  8. WOW! this is amazing. thanks a lot!

    ReplyDelete
  9. Thanks, I was really starting to get frustrated. Glad your blog came up on search results!

    Jenno
    http://lajenno.blogspot.com

    ReplyDelete
  10. @ La Jenno, thanks for appreciation, feel free to ask any help for Blogger.

    ReplyDelete
  11. hi...thanks so much!
    I did it after a few tries.
    I removed the "background-repeat:repeat" so it wouldn't repeat, but it still does.
    Am I doing something wrong?
    I've got it as:
    body {
    background:$bgcolor;
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    background-image:url(http://4.bp.blogspot.com/_8wBn9_9dU-c/SsMj65A3IxI/AAAAAAAAAAU/FVrTWOoh8LE/bg+damn+hormones.jpg);
    background-attachment: scroll; }

    ReplyDelete
  12. oops!!! i'm sorry...I fixed the problem.
    pls don't approve the earlier comment, but thank you so much for the guide
    very helpful

    ReplyDelete
  13. @ Crazy Cat, it's ok, thanks for appreciation.

    ReplyDelete
  14. Just wanted to say thanks for the tip - it's de-blandified the new blog I'm doing perfectly!

    ReplyDelete
  15. Can you help me? WHat have I done wrong? I have no background image - just blackness...

    Here's my code:

    body {
    margin: 0px;
    padding: 0px;
    background: $mainBgColor;
    color: $mainTextColor;
    font: $bodyFont;
    background-image:url(http://3.bp.blogspot.com/_snTgSI-R0d0/Ss4NQ8hLd8I/AAAAAAAAAAU/b9V6ismvI2I/s400/13+10+2007+017.jpg) background-repeat: no-repeat;
    background-attachment: fixed; background-position: right top;
    background-color: #000000;}

    ReplyDelete
  16. @ , Just use the following code instead of yours:

    body {
    margin: 0px;
    padding: 0px;
    background: #fff;
    color: #000;
    background-image:url(http://3.bp.blogspot.com/_snTgSI-R0d0/Ss4NQ8hLd8I/AAAAAAAAAAU/b9V6ismvI2I/s1600/13+10+2007+017.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right top;
    background-color: #000000;
    }

    Actually when we use Blogger images somewhere other than in posts then you have to use the image address which contains s1600-h (h is removed) and not s400 like you did here.

    The address you used:

    http://3.bp.blogspot.com/_snTgSI-R0d0/Ss4NQ8hLd8I/AAAAAAAAAAU/b9V6ismvI2I/s400/13+10+2007+017.jpg

    The address I modified and used:

    http://3.bp.blogspot.com/_snTgSI-R0d0/Ss4NQ8hLd8I/AAAAAAAAAAU/b9V6ismvI2I/s1600/13+10+2007+017.jpg

    Read this article for more details:

    http://bloggerfaqs.blogspot.com/2009/06/use-blogger-upload-host-images.html

    ReplyDelete
  17. Your instructions were easy to follow. It worked...You totally rock!

    ReplyDelete
  18. I have made the crumpled paper my entire background, but i only wanted it for blog posts and for the side bar. how can i fix this?

    ReplyDelete
  19. @ laura pearl, yes that can be done by adding the background to the "Content-Wrapper" but for exact implementation, I need your blog address where you're applying this hack.

    If you're using a private blog or you don't wanna share your blog here for any reason then create a test blog and use same template as you're using on your main blog, then gimme the address of your test blog!

    ReplyDelete
  20. omg this was so helpful! thanks!

    ReplyDelete
  21. I had wanted 1 single stretched background and instead what I am getting in lots of squares of the background... they look like little tiles repeating over and over. Anyway that I can get a single picture stretched over the whole page?

    ReplyDelete
  22. @ Olathe Community Creche, I think you're using the property background-repeat:repeat; which causes the background image to repeat itself. So, instead of background-repeat:repeat;, please use background-repeat:no-repeat;. This way, your background will not repeat itself!

    ReplyDelete
  23. Thank you so much for taking the time to explain this process. It worked like a charm! Very much appreciated :)

    Thanks again!!

    ReplyDelete
  24. I want just a stripe of my pattern on the left and right of my blog. How do I do this?

    ReplyDelete
  25. how to make the background image fix best to window? does any value needed to assign for the width & height?

    ReplyDelete
  26. OMGGG! THANK YOU SO MUCH!! :):)

    ReplyDelete
  27. @ ~ f i Q ~, sorry but I can't understand your answer! Can you please explain what you wanna say????

    ReplyDelete
  28. Thank you so much for this post! Very thorough and informative.
    I have a question. Is it possible to just put a picture on the left and right sides. Not the entire background. I want the middle where the posts are to be blank. And my image to just be on the sides.
    Thanks for any help you can provide.

    ReplyDelete
  29. @ Trisha, yes that's possible but I can't write another tutorial for that. So, I'd suggest you to send me the pics which you want on right and left side and I'll edit the background as a whole (keeping posts background intact) and send you the final product.

    ReplyDelete
  30. My background picture was successfully set.
    I neeed to know how i can make the Page elements background white??

    ReplyDelete
  31. @ Boo, What is "Page Elements"? Please elaborate!

    ReplyDelete
  32. THANKS A LOT!!! VERY HELPFUL!

    ReplyDelete
  33. Thank you so much! Very clear and helpful!

    ReplyDelete
  34. help me, what will i do if i dont want the image to be repeated because im not using a pattern and what if i want the image to perfectly fit in the center of my page? help me.

    ReplyDelete
  35. the image i uploaded and applied in my background keeps repeating itself although i already made the "no-repeat" one and i want it to be one image that fits perfectly in my window how is that?

    ReplyDelete
  36. Mine isn't showing the wallpaper, what could I be doing wrong?

    body {
    background:$bgcolor;
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    background-image:url([IMG]http://i959.photobucket.com/albums/ae71/sallyvosloophotography/SVP.jpg[/IMG]);
    background-repeat:repeat;
    background-attachment: fixed;
    }

    ReplyDelete
  37. @ doodles, please gimme your blog address, thanks :-)

    ReplyDelete
  38. @ , please use the following code instead of yours:

    body {
    background:$bgcolor;
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    background-image:url(http://i959.photobucket.com/albums/ae71/sallyvosloophotography/SVP.jpg);
    background-repeat:repeat;
    background-attachment: fixed;
    }

    ReplyDelete
  39. thank you so much..finally i've got what i want

    ReplyDelete
  40. hello, I'm having the same trouble with Trisha. I need the image on just the left and right side of the page.
    I tried

    background-attachment: fixed;
    background-repeat: repeat-y;;
    background-position: left;
    background-position: right;

    and

    background-position: left right;
    background-attachment: fixed;
    background-repeat: repeat-y;;

    and

    background-attachment: fixed;
    background-repeat: repeat-y;;
    background-position: left and right;

    but it didn't seem to work :(
    I really like this template though...
    could you help?
    my blog: http://inkedlittlesecrets.blogspot.com/
    the bird image I'm using:
    http://i231.photobucket.com/albums/ee27/Awintita/vintage-layout7.gif

    thank you so much if you could help.

    ReplyDelete
  41. @ FaMY, please send me your layout. I can't write full instructions here!

    levisinside0@gmail.com

    ReplyDelete
  42. i did everything you said and thisis the format thingy

    body {
    background-color: #ccc;
    margin:0;
    font: x-small Verdana, Sans-serif;
    text-align:center;
    color:#000;
    font-size/* */:/**/small;
    font-size: /**/small;
    }background-image:urlhttp://nature.wallpaperme.com/1244-2/School+of+Tropical+Fish_+Tahiti.jpg;
    background-repeat:repeat;
    background-attachment: scroll;

    i put the url of an image from google adn when i clicked "preview" the background didnt show up at all, all it did was make the title and title picture go across the whole page.... how do i get my background to show up?

    ReplyDelete
  43. @ travel freak, use the following code instead of the above:

    body {
    background-color: #ccc;
    margin:0;
    font: x-small Verdana, Sans-serif;
    text-align:center;
    color:#000;
    font-size/* */:/**/small;
    font-size: /**/small;
    background:url(http://nature.wallpaperme.com/1244-2/School+of+Tropical+Fish_+Tahiti.jpg) repeat;
    background-attachment: scroll;
    }

    ReplyDelete
  44. hello, great tutorial, also that on how to upload images with blogger as hoster to them. thanx a lot.
    you said to remove the /s1600-f part of the code. that didnt work for me, the wrapper didnt like that, so i kept it and now it works...
    what is that part of the code for? would you tell me?

    ReplyDelete
  45. OK I Have tried for 2 hours now and with & without the s1600 and nothing shows. Can you tell me what I am doing wrong?

    body {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    text-align: center;
    color: $textColor;
    background: $bodybgColor
    background-repeat:repeat;
    background-attachment: fixed;
    background-image:url(=<a href="http://3.bp.blogspot.com/_IRaOMq6KU-E/TAG0_e_WysI/AAAAAAAABHc/cz7dGsP9JaE//limeade.gifbackground-repeat:repeat;
    background-attachment: scroll;
    font-family: arial,verdana,helvetica,tahoma,Sans-serif;
    font-size: 100%;
    width: 100%;
    }

    ReplyDelete
  46. @ Kendra, here is the corrected version of your code:

    body {
    margin: 0px;
    padding: 0px;
    text-align: center;
    color: $textColor;
    background: $bodybgColor;
    background-repeat:repeat;
    background-attachment: fixed;
    background-image: url(http://3.bp.blogspot.com/_IRaOMq6KU-E/TAG0_e_WysI/AAAAAAAABHc/cz7dGsP9JaE/limeade.gif);
    background-attachment: scroll;
    font-family: arial,verdana,helvetica,tahoma,Sans-serif;
    font-size: 100%;
    width: 100%;
    }

    ReplyDelete
  47. I'm using photobucket as my image hoster, but I had to resize my 1600 px by 1100 px photoshop photo to get it to kind of fit, and even then, the background is still slightly too big... any help?
    http://snowders.blogspot.com/

    ReplyDelete
  48. @ tracie, the width of your background image is too much, reduce it more. Anyways, really cute family blog.

    ReplyDelete
  49. Thanks for this! Was a lot of help

    ReplyDelete
  50. I am trying to follow and got this error message when uploading the image and saving

    "Invalid variable declaration in page skin: Variable is used but not defined. Input: bgcolor"

    Am I uploading in the wrong spot? Here is my code

    body {
    background:$bgcolor;
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    background-image:url(http://i302.photobucket.com/albums/nn105/pictureperfectdesignsunlimited/blogspotback.jpg);
    background-repeat:repeat;
    background-attachment: fixed;
    }

    ReplyDelete
  51. @ Stacey, Blogger now offers to upload your own image as background so just upload your own image in the Template Designer.

    ReplyDelete
  52. how to add picture on my share link from my blog to facebook

    ReplyDelete
    Replies
    1. Hi ABBA, can you please explain or give an example where you've see such link. Sorry, couldn't understand your question.

      Delete
  53. I am trying to add my image as a banner I am a total novice and dont get this at all. the design blogger template does not let me place my image where I want and I have tried doing your steps and I just dont get it, PLease can you help? Thanks

    ReplyDelete
    Replies
    1. Hi Workout, can you please tell me where do you want to place the banner? You can show me an example blog or just do some editing in Microsoft Paint.

      Delete
  54. why this not giving me full background please help me
    body {
    margin: 0px;
    padding: 0px;
    background: #fff;
    color: #000;
    background-image:url(http://i1061.photobucket.com/albums/t464/mrshine1/20120721161810paulscholesmancheste_1440x900_452900.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position:center bottom;
    background-color: #000000;
    }

    ReplyDelete
    Replies
    1. @ FREE FOOTBALL, what is your blog address?

      Delete
  55. its only coming for left i want both left and right side pls say me quickly

    ReplyDelete
    Replies
    1. Hi Anonymous, you've not mentioned any info about yourself or your blog. How am I supposed to help you?

      Delete

Note: All comments will be moderated.