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.
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 |
very helpful peter,thanks for that,
ReplyDeletehow about posting a picture/image in your header/title?
How to post picture in heading
ReplyDeleteGood one!
ReplyDeleteJust 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...?
ReplyDeleteI 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
ReplyDeleteHi..Your blog awesome soooo helpfull.My problem
ReplyDelete1.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.
Is there a way you could color the wrapper that holds all the content like it was a table or a cell?
ReplyDeleteThanks very helpfull
ReplyDeleteHi 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!
ReplyDeleteHi 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?
ReplyDeleteHi dahmirah,
ReplyDeleteThis 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
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.
ReplyDeleteAlso, 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.
Nice Tut, but I had to add my own touch for the background to be repeated vertically:
ReplyDeletebackground-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! :)
Check out my result here and let me know what you think. Great article!
ReplyDeletehi there, i was wondering if you could help me out,
ReplyDeletei 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!
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!
ReplyDeleteHere'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!
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!
ReplyDeleteHere'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!
Is there any way to use a picture from your computer without putting it on a web host?
ReplyDeleteNO NO and NO
ReplyDeleteI'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
ReplyDeleteHelp!! 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/
ReplyDeleteHow 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.
ReplyDeleteWhat white block?
ReplyDeleteFor Shh,
ReplyDeleteUnless 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.
For Shh,
ReplyDeleteUnless 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.
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
ReplyDeleteplease help!
http://www.christophersam.com/
ReplyDeleteMy whole blog ends up aligned to the left of the page after I added the background image. Any ideas why? Thanks
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
ReplyDeleteGood . Very useful Thanks =)
ReplyDelete"image will not scroll with the rest of the page"?? could you help me, please? Greetings from Poland!
ReplyDelete"image will not scroll with the rest of the page"?? please send me answer on unikronblog@gmail.com Thank you!
ReplyDeleteAre 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?
ReplyDeleteYES. Can i do smth with this? Can you halp me??
ReplyDeleteAdd this attribute:
ReplyDeletebackground-attachment: fixed;
like this:
{
background-image:
url('smiley.gif');
background-repeat:
no-repeat;
background-attachment:
fixed
}
YES, YES, YES!!!! THANKS A LOT!!! YOU ARE THE BEST!!! One more time thank you very much!! PEACE!!
ReplyDeleteThank you verY much for your help!
ReplyDeleteHi!
ReplyDeleteThanks 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?
Just setting up my blog on Blogger. A major help! Thanks
ReplyDeleteTHANKS SO MUCH FOR THIS!!! This will surely help bring more attention to people's blogs!
ReplyDeletePeter what do I type in to center the image in the background. THX!!!
ReplyDeleteRefer to centering text, pictures, banners, etc.
ReplyDeletethank you very much for your advise on this topic!
ReplyDeletei 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.
ReplyDeleteplease, how can i fix this bug??????
thank you!
How and where did you host the photo for the background?
ReplyDeleteHOW 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!!
ReplyDeleteWell 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.
ReplyDeleteBut 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.
what do u mean, to printscreen? sorry, im not that "blog-savvy"
ReplyDeletebtw, i have microsoft powerpoint 2003, if that makes a difference
ReplyDeletethe color of the collage isn't a problem, ive made sure of that
ReplyDeletecan i do it without downloading something? i HATE downloading things i dont necessarily need onto my computer
ReplyDelete"what do u mean, to printscreen?"
ReplyDeletePRTN (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).
Thank you came in very handy!
ReplyDeleteLove how my blog looks now.
Stephanie Grace xx
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/
ReplyDeleteTHANK YOU SO MUCH
it looks fine to me
ReplyDeleteIs there a way to make the background be 100% so it fits the whole page?
ReplyDeleteThanks
Refer to Self improvement (demo blog). Isn't that what you want - cover the whole screen?
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteSorry don't understand.
ReplyDeletehello!
ReplyDeleteplease 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!
Thank you! worked like a charm! check out my NEW feathery background: http://katherineangiestar.blogspot.com/
ReplyDeleteWhen 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...
ReplyDeleteThanks!
hello
ReplyDeletei'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~
Thank you so much! Very helpful!
ReplyDeleteQuick and easy! Thanks!
ReplyDeletewow...very useful.... very helping... thx mate
ReplyDeleteAll this was very helpful...Thanks much!
ReplyDeletei did the same but am not able to see it . http://penultimatepage-floodlights.blogspot.com/
ReplyDeleteimage : 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;
}
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:
ReplyDeletehttp://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.
Hey Peter
ReplyDeleteThanks 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
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="...."
ReplyDeleteand came up with the URL for my earlier comment.
Was that how you got your "direct source"?
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 .
ReplyDeleteI 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.
ReplyDeleteAdd this to the CSS:
ReplyDeletebackground-attachment:fixed;
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.
ReplyDeletehttp://laworetreat.blogspot.com/
image for background:
http://s944.photobucket.com/albums/ad287/lawrosretreat/?action=view¤t=blogbackground.jpg
what am I doing wrong?
Try using the direct link http://i944.photobucket.com/albums/ad287/lawrosretreat/blogbackground.jpg instead
ReplyDeleteWow! so fast :)
ReplyDeletethankyou thankyou thankyou.
You're a gem.
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
ReplyDeleteI am still trying to set everything back up.
Your blog looks fine to me?
ReplyDeleteI'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.
ReplyDeleteI'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!
Maybe you can repeat the image horizontally and vertically
ReplyDeletehmM.. 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 ..?
ReplyDeleteLet it repeat
ReplyDeleteif i don wanna repeaT ...?? any idea ..?
ReplyDeleteThen pray to God to give you a miracle image that can expand and contract or maybe invent one yourself.
ReplyDeleteSeriously, I wonder if there are graphics that can expand and contract with the visitor's screen size.
I am making my own image in photoshop, what size does my image need to be?
ReplyDeleteRefer to How to find width of blog Header, main column, sidebars
ReplyDeleteI 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?
ReplyDeletebrainsparksandlightsoff.tumblr.com
ReplyDeleteMine's doing something hideously ridiculous. Any reason why the image wouldn't start from the top?
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.
ReplyDeleteTash, your link led to "We couldn't find the page you were looking for.
ReplyDeleteFeel free to contact support if there's anything we can help you find."
Arrgh, I'm a silly. Linked you to the ex-blog.
ReplyDeletehttp://brainsparksandlightsoff.blogspot.com/
THERE WE GO!
what if mine doesnt look like yourr example. and it looks like this....
ReplyDelete/* Variable definitions
====================
Hi Peter,
ReplyDeleteDo 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!
background-attachment:fixed;
ReplyDeleteHello 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!
ReplyDeletehi, 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.
ReplyDeletewww.clairestrebeckphotos.blogspot.com
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.
ReplyDeleteI tried this may times, but it's not working for me.
ReplyDeleteThis 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.
I tried this several times, but it's not working for me. This instruction is confusing.
ReplyDelete"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.
You may not have noticed the date stamp of this post -"APRIL 27, 2006"
ReplyDeleteAnyway, Blogger has moved on and I probably need to update this post when I have the time.
Hi!
ReplyDeleteMy 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?
Sorry don't understand
ReplyDeleteHey I liked This
ReplyDeleteBut 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
Apologies, don't understand your question. Anyway if you want photos to download faster, the surest way is to resize them before you unpload.
ReplyDeletehello,,
ReplyDeletei 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
How do you make a background image stay onthe background (background does not move when you scroll up or down)
ReplyDeleteJust add this single line
ReplyDeletebackground-attachment:fixed;
I would like to add Pic on header , that pic is made of many small pics.
ReplyDeletehow to do it.
http://www.blogger.com/
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
ReplyDeleteworks great, thanks!
ReplyDeletesdsd
ReplyDeleteMine has no post background?!
ReplyDeleteHave a look over at - http://onejohnchapterthree.blogspot.com/
Please help! I have tried everything!!
Thankx soo much....
ReplyDeleteThis is CSS , it is same as HTML ? Help me , im new~~
ReplyDeleteYes 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.
ReplyDeletepete, i'm more confused than ever.
ReplyDeleteHutcheson Headline, what exactly are you confused about?
ReplyDeleteHi 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."
ReplyDeleteMy 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? :(
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.
ReplyDeleteHello.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
ReplyDeleteBlogger has now made that a simple task. Just sign into Blogger.com
ReplyDeleteDashboard > Design > Template Designer > Background
and you can change background at will
nice article
ReplyDeletevisit:
http://internetricks4u.blogspot.com/
Finally!!!! I could do it!!! THANK YOU SO MUCH!!!
ReplyDeletePeter,
ReplyDeleteI want to make a blog like this http://www.tipsotricks.com/ in blogspot. Is it possible?
Any idea / assistance from you.
Imdad
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