Thursday, April 27, 2006

How to make a picture as a background

Update: With the new Template Designer, it is now very easy to add or change background for your blog. Sign into Blogger.com

Dashboard > Template Designer > Background

and there you can change your background color or image at will without having to directly edit the template.


The first thing you have to do is to choose an image where the color of the image and the text of the blog are compatible and the color doesn't clash. Otherwise the text will be very difficult to read. Another thing is the size of the image. If the image size does not fit the whole background, it will normally repeat itself unless you choose not to do so (see last part of post). If it repeat itself, to make the background pleasant, you will have to ensure the repeated images merge properly. For my demo blog Self Improvements, I chose a cloudy sky with white and light blue as they merge into each other well while the black text on the light background will still be clearly readable.

When you have selected your image and have stored it in your computer, then to make the picture as a background, you first have to post the picture on the web somewhere or host the picture with a photo host like Photobucket. Refer to "Getting Blogger to host your pictures for the profile, etc." if you want Blogger to host the image. Get the url (example http://photo-url.jpg) of the picture, then sign into Dashboard, select the blog, click TEMPLATE tab, and look for this block of CSS code in the template. It will be somewhere in the beginning of the template:

body {
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}


Then add this line of code
background-image:url("URL of photo");
to the above, as shown below (added code in red)

body {
background:#fff;
background-image:url("URL of photo");
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

replacing URL of photo with the real url of the picture, for example
http://photos1.blogger.com/blogger/5611/753/1600/sky-19.0.jpg

If you don't want the image to repeat in the background, all you have to do is to add another line to the code: background-repeat:no-repeat;

So your CSS code become:

body {
background:#fff;
background-image:url("http://photos1.blogger.com/blogger/5611/753/1600/sky-19.0.jpg");
background-repeat:no-repeat;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

NEWER POST    OLDER POST

125 comments:

  1. very helpful peter,thanks for that,

    how about posting a picture/image in your header/title?

    ReplyDelete
  2. Just in hope you still answer questions here - What happens if the window size changes? I'm planning on using an image that will have busy-image on the outer edges, but have a space in the centre left black for text. I've noticed that changing the window size moves the text to keep it centred, will it move the text out of alignment with the image, or will the image move with the text? Can I "align centre" to make the image stay on alignment with the text or...?

    ReplyDelete
  3. I do not think so as the part doing it is in the CSS section and there HTML doesn't work. Maybe you should consider changing to an image whose color will allow text to be seen properly, make the image repeat and the edges blend into each other, like this blog: Marcie's Musing. The image she used can be seen here: Background image

    ReplyDelete
  4. Hi..Your blog awesome soooo helpfull.My problem
    1.How to make picture Tv actor as background without "image will not scroll with the rest of the page"??
    like this
    http://sukan4dhyip.blogspot.com/

    2.how to stretch pic fix with entire blog?what the exact pic dimension it is? like this
    http://kaasmarkt.blogspot.com/
    plz help.

    ReplyDelete
  5. Anonymous11/26/2006

    Is there a way you could color the wrapper that holds all the content like it was a table or a cell?

    ReplyDelete
  6. Thanks very helpfull

    ReplyDelete
  7. Hi there-- Could you tell me how to put a picture as the background image on the blog-- behind/on the sides of the main column of text? Thanks!

    ReplyDelete
  8. Hi and thanks for the tip! One question: how do you put the background transparent so that the picture will appear behind the posts and sidebar?

    ReplyDelete
  9. Hi dahmirah,

    This post How to make an image as a background for your blog was written for the old classic template, but can also be used for the New Blogger template.

    Using background image for blog takes careful planning/choosing, as the text color must contrast with all parts of the image, and it will be difficult to find an image to fit this requirement.

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  10. Hmmm... If you look at Marcie's code it looks like she's using 4 separate images to create the background at the top of her page and another one for the image at the bottom of her page. I'm thinking she did this so that her background will look good when the width is resized. The code to do this seems more complicated than what you've described.

    Also, the link to Marcie's "Background image" takes you to one of her scrapbooking papers not any of the images used for the background of her blog.

    If you know of any examples that use a background image the way you've described please share the links. I'd like to see how it works.

    Thanks for idea, Peter.

    ReplyDelete
  11. Nice Tut, but I had to add my own touch for the background to be repeated vertically:

    background-repeat:repeat-y;

    If you ant it horisontal:

    background-repeat:repeat-x;

    Tried that on a new blog I'm building:

    Weird Things Happen All Time

    Thanks for great blog! :)

    ReplyDelete
  12. Check out my result here and let me know what you think. Great article!

    ReplyDelete
  13. hi there, i was wondering if you could help me out,
    i wanted to stretch the image so it fills the whole background and keep it fixed so when you scroll it doesn't repeat.

    the link to my site is
    sobecastandardissue.blogspot.com

    thanks!

    ReplyDelete
  14. I was able to put a picture on the background of my blog, but I want the center of my blog with text to remain white, so that the picture just shows up on the left and right side like on this blog: http://blog.chelseaelizabeth.com/ I also need my photos larger like on that same blog. Hoping you can pls tell me how to do that!

    Here's my blog now with the picture all over and under my text which is why I had to use the light, plain color: http://tinalouisephotographer.blogspot.com/

    I want white behind my text! THX!

    ReplyDelete
  15. I was able to put a picture on the background of my blog, but I want the center of my blog with text to remain white, so that the picture just shows up on the left and right side like on this blog: http://blog.chelseaelizabeth.com/ I also need my photos larger like on that same blog. Hoping you can pls tell me how to do that!

    Here's my blog now with the picture all over and under my text which is why I had to use the light, plain color: http://tinalouisephotographer.blogspot.com/

    I want white behind my text! THX!

    ReplyDelete
  16. Is there any way to use a picture from your computer without putting it on a web host?

    ReplyDelete
  17. I've tried so many different times to post a picture as my background but it just wont work. Do you think you could help, I've added the extra code but it just wont work, Any help would be appreciated

    ReplyDelete
  18. Help!! I have managed to use a picture background for my blog, but I am unable (have no idea) how to remove the white block from behind the text. I would prefer to have white text on my coloured background. This is my first attempt at blogging and using HTML. My blog is http://happysplatdesignstudio.blogspot.com/

    ReplyDelete
  19. How can I occupy the whole background of my blog with just one picture? when I try setting the image as a background picture it only occupy a small area which made my blog look weird.

    ReplyDelete
  20. For Shh,

    Unless you have a blog of constant length which is very unlikely, you cannot have a single image as background. What you can do is to repeat horizontally as well as vertically.

    ReplyDelete
  21. For Shh,

    Unless you have a blog of constant length which is very unlikely, you cannot have a single image as background. What you can do is to repeat horizontally as well as vertically.

    ReplyDelete
  22. Hey Peter, I tried it a million times and it does not work for me. I want to put a picture on the sides of my blog. where there is currently nothing or just plain white. bccbulletinboard.blogspot.com

    please help!

    ReplyDelete
  23. http://www.christophersam.com/

    My whole blog ends up aligned to the left of the page after I added the background image. Any ideas why? Thanks

    ReplyDelete
  24. Hey, we spent the weekend creating backgrounds and headers and buttons and more to create our own custom blog. Our background picture is 1240 X 768 but when we put it as the background image i basically only takes up half the blog and we would like it to take up the whole blog, do I have to fiddle with the column with or something? Thanks

    ReplyDelete
  25. Good . Very useful Thanks =)

    ReplyDelete
  26. "image will not scroll with the rest of the page"?? could you help me, please? Greetings from Poland!

    ReplyDelete
  27. "image will not scroll with the rest of the page"?? please send me answer on unikronblog@gmail.com Thank you!

    ReplyDelete
  28. Are you complaining that you wanted the background image to not scroll with the text but stay fixed as you scroll down the page, but that didn't happen?

    ReplyDelete
  29. YES. Can i do smth with this? Can you halp me??

    ReplyDelete
  30. Add this attribute:

    background-attachment: fixed;

    like this:

    {
    background-image:
    url('smiley.gif');
    background-repeat:
    no-repeat;
    background-attachment:
    fixed
    }

    ReplyDelete
  31. YES, YES, YES!!!! THANKS A LOT!!! YOU ARE THE BEST!!! One more time thank you very much!! PEACE!!

    ReplyDelete
  32. Thank you verY much for your help!

    ReplyDelete
  33. Hi!

    Thanks sooo much for this little tutorial. However, I was wondering if you could instruct me on how to achieve an effect similar to this blogger's blog:

    http://soulmusic4u.blogspot.com/

    The picture of the wooden slats is the background, but the text and blog posts are perfectly centered on a white background with a 1" margin on both sides. Any ideas of how to achieve this effect?

    ReplyDelete
  34. Just setting up my blog on Blogger. A major help! Thanks

    ReplyDelete
  35. THANKS SO MUCH FOR THIS!!! This will surely help bring more attention to people's blogs!

    ReplyDelete
  36. Peter what do I type in to center the image in the background. THX!!!

    ReplyDelete
  37. thank you very much for your advise on this topic!

    ReplyDelete
  38. i made an image, it.s 1600 × 761. i want to make it the background of my blog but when i upload & set all the html codes, the image appears really small in the background... even when i write the code background-attachment fixed.
    please, how can i fix this bug??????

    thank you!

    ReplyDelete
  39. How and where did you host the photo for the background?

    ReplyDelete
  40. HOW do you turn a powerpoint slide into a picture that can be put up as a picture for my background?? ive spent an hour designing this awesome collage & i dont want my time to go to waste!!

    ReplyDelete
  41. Well there may be other way but the way I can think of is to PRINTSCREEN to capture the slide into clipboard, then paste it into a photo editor like Irfanview, edit it if necessary, then save it into the computer and then upload it to the web to be used as a background.

    But background to what? If it is background to a section which contains text, you have to ensure the text do not become unreadable because of the color of your collage.

    ReplyDelete
  42. what do u mean, to printscreen? sorry, im not that "blog-savvy"

    ReplyDelete
  43. btw, i have microsoft powerpoint 2003, if that makes a difference

    ReplyDelete
  44. the color of the collage isn't a problem, ive made sure of that

    ReplyDelete
  45. can i do it without downloading something? i HATE downloading things i dont necessarily need onto my computer

    ReplyDelete
  46. "what do u mean, to printscreen?"

    PRTN (printscreen) is a key in your computer keyboard which when pressed will put into your computer memory (clipboard) whatever you have on your computer screen which in your case will be what is displayed on the screen by MS Powerpoint and which you can paste into any photoeditor.

    "can i do it without downloading something?"

    I assume you are referring to downloading some photoeditor program like Irfanview or GIMP both of which are free. Well, if you don't mind paying for it, you can go buy Photoshop etc and you wouldn't need to download anything.

    Alternatively you can use PAINT which comes with WINDOWS if you can figure out how to crop images with PAINT (I was told one can do that but no one has told me how to).

    ReplyDelete
  47. Thank you came in very handy!
    Love how my blog looks now.
    Stephanie Grace xx

    ReplyDelete
  48. WOW, You're blog is SUPER helpful, I followed your instructions for how to add a pic as background and removed repeat, but now the pic is at the top of my blog and then goes away the further down the page you go, can you PLEASE help me with that? My blog is: http://melindasart.blogspot.com/

    THANK YOU SO MUCH

    ReplyDelete
  49. Is there a way to make the background be 100% so it fits the whole page?
    Thanks

    ReplyDelete
  50. Refer to Self improvement (demo blog). Isn't that what you want - cover the whole screen?

    ReplyDelete
  51. This comment has been removed by the author.

    ReplyDelete
  52. hello!
    please can u tell me how to change the color text in my blog...i changed the picture in the background,i fixed.. and from that moment i cannot change the text color in fonts and colors anymore..the rest are working,except text color! so,what i cand do in css to can fix the problem?i tried many things ,but nothing happened ...
    thanks!

    ReplyDelete
  53. Thank you! worked like a charm! check out my NEW feathery background: http://katherineangiestar.blogspot.com/

    ReplyDelete
  54. When you say you have to make the image big enough or it'll repeat... what image size would you recommend? I'd like to size my art to that size so it wont repeat and have lots of extra room...

    Thanks!

    ReplyDelete
  55. hello
    i'm using one of blooger Templates
    and trying to edit it, the only thing i don't know how to fix is the bright pink background, i looked for the codes u said here but didn't find them,so i guess it's different codes needed

    so can you tell me how to change the color of this bright pink background or add a tile background picture will be better
    here is my blog>>
    http://starpointslist.blogspot.com

    thank you~

    ReplyDelete
  56. Thank you so much! Very helpful!

    ReplyDelete
  57. Quick and easy! Thanks!

    ReplyDelete
  58. wow...very useful.... very helping... thx mate

    ReplyDelete
  59. All this was very helpful...Thanks much!

    ReplyDelete
  60. i did the same but am not able to see it . http://penultimatepage-floodlights.blogspot.com/

    image : http://picasaweb.google.com/lh/photo/2XzMMT5TrTUV1zNmpUGShgaGgi6Xo3_goUM7aYN18FU?feat=directlink


    code :

    body {
    background:$bgcolor;
    background-image:url("http://picasaweb.google.com/lh/photo/2XzMMT5TrTUV1zNmpUGShgaGgi6Xo3_goUM7aYN18FU?feat=directlink");
    margin:0;
    color:$textcolor;
    font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    }

    ReplyDelete
  61. This is the first time I am trying to get the photo URL for displaying images like background image and I had to view source of that photo URL you gave me. May I suggest you try this photo URL instead:

    http://lh5.ggpht.com/_kpv9KGtQEcs/S9lTvWLmdDI/AAAAAAAACOI/8GmX9bOshLA/s512/Electrical_Pole_and_Tower_Flood_Lights_for_ovals_parks.jpg

    and get back to me to see if it helps. Feedback on success or failure is always welcomed.

    ReplyDelete
  62. Hey Peter

    Thanks for getting, after asking the question in ur blog , i checked couple of blogs source code , everything looked alike . So i thought may be url needs to changed .I changed the url to direct source of the file and it worked .

    Anyhow . Thanks for getting back to me

    Thanks
    Giri

    ReplyDelete
  63. I have never used Picasaweb (not directly anyway) for background or <img> but what I did was view page source at the first link you gave and then searched for src="...."
    and came up with the URL for my earlier comment.

    Was that how you got your "direct source"?

    ReplyDelete
  64. No . I actually searched for a image and stored that my image in my picasa web and gave that url earlier.Second time i gave the original direct url .

    ReplyDelete
  65. I am trying to figure out how to post a picture on my background that will be stationary then the blog scroll over it. I can only get the picture to be stationary then when the blog scrolls so does the picture and then the background is just black once picture has scrolled all the way up.

    ReplyDelete
  66. Add this to the CSS:

    background-attachment:fixed;

    ReplyDelete
  67. Dummy that I am when it comes to stuff like this, your blog is so easy to follow, I thought I understood perfectly what you were saying but apparently I don't - I can't see a change on my blog.
    http://laworetreat.blogspot.com/
    image for background:
    http://s944.photobucket.com/albums/ad287/lawrosretreat/?action=view&current=blogbackground.jpg

    what am I doing wrong?

    ReplyDelete
  68. Try using the direct link http://i944.photobucket.com/albums/ad287/lawrosretreat/blogbackground.jpg instead

    ReplyDelete
  69. Wow! so fast :)
    thankyou thankyou thankyou.

    You're a gem.

    ReplyDelete
  70. Thank you! I followed this post on how to create a custom background and it did work, but this morning I realized when I resize the browser screen, the image changes size as well and bleeds into the text space. Is there an easy way to fix this. My background is one image with the white space created in the image. My blog is www.bubblesunderthemoon.blogspot.com

    I am still trying to set everything back up.

    ReplyDelete
  71. Your blog looks fine to me?

    ReplyDelete
  72. I'm making a blog via blogspot for the first time, and want to design my own background art in Photoshop, save it as an image, and use your method for making it my blog's background image.

    I've tested it, but the image keeps showing up in just the top left corner of the background. Can you give specific size measurements to make my image in photoshop, so that it will always stay the same size as the window/web page, filling up the background entirely?

    Thank you!

    ReplyDelete
  73. Maybe you can repeat the image horizontally and vertically

    ReplyDelete
  74. hmM.. i download a large sized image.. bt then it onli fixed a small part of my blog .. how cn i make the image as large as my blog ..?

    ReplyDelete
  75. if i don wanna repeaT ...?? any idea ..?

    ReplyDelete
  76. Then pray to God to give you a miracle image that can expand and contract or maybe invent one yourself.

    Seriously, I wonder if there are graphics that can expand and contract with the visitor's screen size.

    ReplyDelete
  77. I am making my own image in photoshop, what size does my image need to be?

    ReplyDelete
  78. I am using Googles blogger. On the extra pages that I have created, as they get longer the background disappears, does not continue, and eventually it is just black background. How do I correct this?

    ReplyDelete
  79. brainsparksandlightsoff.tumblr.com

    Mine's doing something hideously ridiculous. Any reason why the image wouldn't start from the top?

    ReplyDelete
  80. I haven't ever created a page long enough to get that kind of problem. However as I understand it, static page are almost the same as a normal blog page and in fact share the same template so I am surprise to hear about your problem. Perhaps some testing need to be done.

    ReplyDelete
  81. Tash, your link led to "We couldn't find the page you were looking for.

    Feel free to contact support if there's anything we can help you find."

    ReplyDelete
  82. Arrgh, I'm a silly. Linked you to the ex-blog.
    http://brainsparksandlightsoff.blogspot.com/
    THERE WE GO!

    ReplyDelete
  83. what if mine doesnt look like yourr example. and it looks like this....


    /* Variable definitions
    ====================

    ReplyDelete
  84. Hi Peter,

    Do you know how I can get it so that the image remains in one place while my blog scrolls over top of it? (That is, when I scroll down my blog posts, the image remains fixed behind it?)

    Thanks for the helpful posts!

    ReplyDelete
  85. background-attachment:fixed;

    ReplyDelete
  86. Hello Peter, thank you for this helpful blog. I have followed your advice on uploading own photo, but even though it is big enough to cover the whole screen (5472x4104 pixels) the template (I am using the new Travel template) still shrinks it. Is there anything I can do to make it cover the whole screen? Thanks!

    ReplyDelete
  87. hi, i am having a really hard time trying to get my custom background to load. it seems like the html wording is different now (??). is there anyway you can help me? currently it is set to simple.

    www.clairestrebeckphotos.blogspot.com

    ReplyDelete
  88. Simple is very similar to the Minima template I liked and use. However, I have not really gone into the Blogger new DESIGN because if I remember correctly they say it is not supported by I think Internet Explorer so I had no motivation to change. So I haven't really tangle with their new codes except when I am forced to by them.

    ReplyDelete
  89. I tried this may times, but it's not working for me.
    This instruction is confusing:
    "select the blog, click TEMPLATE tab"
    I'm not able to find this tab, only the Template designer tab.
    So I went to the Design->Edit HTML->Edit Template tab and followed the rest of the intsructions. But it's still not working for me.
    Please advice.

    ReplyDelete
  90. I tried this several times, but it's not working for me. This instruction is confusing.
    "select the blog, click TEMPLATE tab, and look for this block of CSS code in the template."
    I can't find any tab called template, only the template designer. So I tired this Design->Edit HTML-> Edit Template. I edited the template here, but its still not working for me. Please help.

    ReplyDelete
  91. You may not have noticed the date stamp of this post -"APRIL 27, 2006"

    Anyway, Blogger has moved on and I probably need to update this post when I have the time.

    ReplyDelete
  92. Hi!
    My blog's image has space to the right - is there any way to have my blog title print to the right of the image instead of on top of the image?

    ReplyDelete
  93. Hey I liked This
    But 1 Doubt Other Urls Take A long Tym to load Wereas which u put is faster how can we put urls uploading it from blogspot

    ReplyDelete
  94. Apologies, don't understand your question. Anyway if you want photos to download faster, the surest way is to resize them before you unpload.

    ReplyDelete
  95. hello,,
    i love to make my own backgroud but i try harder it still can't be

    so i want to ask where to get block CSS code in the template?

    please help me

    ReplyDelete
  96. How do you make a background image stay onthe background (background does not move when you scroll up or down)

    ReplyDelete
  97. Just add this single line

    background-attachment:fixed;

    ReplyDelete
  98. I would like to add Pic on header , that pic is made of many small pics.
    how to do it.
    http://www.blogger.com/

    ReplyDelete
  99. YOu can make a composite image from many pics using a suitable photo editor like for example How to create composite images side by side and then use 1 composite image for the header background

    ReplyDelete
  100. Mine has no post background?!

    Have a look over at - http://onejohnchapterthree.blogspot.com/

    Please help! I have tried everything!!

    ReplyDelete
  101. This is CSS , it is same as HTML ? Help me , im new~~

    ReplyDelete
  102. Yes that is CSS (Cascading Style Sheet) used to control appearance of a website. I believe it is now much easier with Blogger's new Template Designer.

    ReplyDelete
  103. pete, i'm more confused than ever.

    ReplyDelete
  104. Hutcheson Headline, what exactly are you confused about?

    ReplyDelete
  105. Hi there! I followed your steps but instead of my image showing as a background, it pops up at the top of edit mode and says "Invalid variable declaration in page skin: The skin variables could not be parsed as they are not well-formed."

    My blog is currently set to a simple black template. And now when I go into the Template Designer it says Unable to complete request where the preview should be. Arrrghh. What have I done? And how do I fix it? :(

    ReplyDelete
  106. Malinda, this post was published pre-template designer and perhaps needs editing. I believe you can more easily do it via template designer. Suggest you start off with a test blog with a template designer template and keep track of the steps needed to change the background.

    ReplyDelete
  107. Hello.I have the blog http://ahhstateofmind.blogspot.com/, can you help me pls? Where I have "body" ..it doesn`t work to put the code for background...pls help

    ReplyDelete
  108. Blogger has now made that a simple task. Just sign into Blogger.com
    Dashboard > Design > Template Designer > Background
    and you can change background at will

    ReplyDelete
  109. nice article

    visit:

    http://internetricks4u.blogspot.com/

    ReplyDelete
  110. Finally!!!! I could do it!!! THANK YOU SO MUCH!!!

    ReplyDelete
  111. Peter,

    I want to make a blog like this http://www.tipsotricks.com/ in blogspot. Is it possible?

    Any idea / assistance from you.

    Imdad

    ReplyDelete
  112. Creating a generic blog nowadays is very easy. It is only when you want to do more customization that more work has to be done but even that has now become easier with new technologies and ideas. What exactly do you want?

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics