How to Add a Background Image in Blogger

Blogger LogoUniqueness is vital to all bloggers, isn't it? And one of the most unique enhancements for Blogger / Blogspot websites is adding custom background image. Adding one might slow the access of the blog a little bit (especially if the background image is too big), but if done correctly, it is worthy of the uniqueness. By default, Blogger / Blogspot does not provide any menu to add our own background image. However, we still can do it another way.

Let’s get to the point, shall we? Here is the technique:

First, we have to prepare the image that is to be used as the background, and a 1024 x 768 jpg file is the most commonly used type. You can use existing image in the web, and what we need is its direct link (to the file). Don’t forget, be careful with its copyright, since you want more uniqueness, not problems.

You can also use your own image (from your computer), but in that case, first, you need to upload the file to a free file hosting website, such as ImageBoo.com . Then you can obtain its direct link, which is needed to set the codes in the next step.

Just in case, direct link is a link that refer directly to the file, not to the page of a website which contains it, such as "http://imageboo.com/example.jpg" not "http://imageboo.com/example.html"

The next step, we need to edit the codes of the template of our blog. It is accessible through dashboard >> layout >> edit HTML. You might also want to un-check “expand template widget” to simplify the appearing codes. Unless they are still not too complicated for you and you want to complicate things a little bit :D

Then, we need to find these bold codes, which are responsible in authorizing the background of all the pages in the blog. They are located in the upper section of the codes, you can use your browser’s searching tool to find them faster (ctrl+f in Mozilla Firefox).

body {
background: #ffffff;
margin: 0;

After finding them, we need to change them into these bold codes:

body {
background:#fff url("direct URL of the image");
background-position: down-left;
background-attachment: fixed;
background-repeat: no-repeat;
margin: 0;

Then save the template, and the background shall be yours.

Codes options:

#123 refers to the background color behind the image, which will be shown when visitors opt not to view any image from their browsers. The format is in three-digits color hexa-codes, meaning that the color white will be represented by "#fff" instead of "#ffffff". You can edit this code to show any color you wish. Actually, you can use either 3-digits or 6-digits hexa-codes for this.

Background-position: down-right; refers to the image’s starting position when rendered, down-right. Another options:
  • Background-position: center;
  • Background-position: top;
  • Background-position: bottom;
  • Background-position: left;
  • Background-position: right;
  • etc
Background-repeat: no-repeat; refers to the setting of no repeated appearance of the image. For example, if you use a 500 x 500 pixels jpg file, you will need to repeat it to cover the whole screen of 1024 x 768 resolutions. Otherwise, it will appear only as a tile somewhere in the screen, not covering the whole screen. Other options (the brackets are not the part of the codes, just for description):
  • Background-repeat: repeat; (both horizontal and vertical repeating)
  • Background-repeat: repeat-x; (horizontal repeating)
  • Background-repeat: repeat-y; (vertical repeating)
Tips: Using both vertical and horizontal repeating is good to adapt to the different resolutions the visitors use.

background-attachment: fixed; refers to the setting not to let your background image be scrolled too when visitors scroll the page up or down. Other option:
  • background-attachment: scroll;
Update July 2 2009: Imageboo.com recently deletes files without any cause and I have no idea why. I suggest using photobucket.com , same free but much more reliable.

OK, that's all folks. Any question?

93 comments:

Chloe said...

I have found this very helpful, thanks! However, I have tried to follow the steps and now the background of my blog is white...please help!

Isaac Yassar said...

@Chloe: I have checked your blog (page source), the background codes you are using are not in the right format. You need to use exactly the same format like in the box inside the post above (at least for the first bold line).

ibrahim naxim said...

Your site very neat and clean. I love cleanliness.

Isaac Yassar said...

@Ibrahim: Thank you. I try to make my site simple in design and easy navigated.

~Rose said...

Hi; thanks so much for your helpful tutorials. Unfortunately, I can't get a background image to show on my blog (roseseclecticgarden.blogspot.com); I have no idea what I'm doing wrong and it's driving me nuts! If you could offer any advice it would be greatly appreciated...

Isaac Yassar said...

@Rose: I've checked your blog and page source, I believe the source of the problem is that the image are located inside another website (http://www.eclecticrose.com/), and some copy protection settings (which sometimes unnoticeable and unchangeable by the owner / you) forbid the image to be used in another website. Try to save the image in your hardisk, then upload it on www.imageboo.com , then use its direct URL inside the codes. Let me know if I can assist you any further.

Invictas & Co. said...

This was VERY useful indeed. Not only for telling us how to apply the image we want, but also the small details about the scrolling and the expanding.

Very useful, thank you so much!! :)

Bryant Family said...

Thanks... You made this much simpler than other did...

JB

HALL said...

I started a blog just to try out different things and was not successful in using my own image as a background.

This is the code in the template:

body {
font: $bodyFont;
text-align: center;
margin: 0px;
padding: 0px;
color: $textColor;
background: $bgColor;
}


Your instructions say to replace it with your code and my link:

body {
background:#fff url("http://s482.photobucket.com/albums/rr182/PriscillaH_2009/Gifs/keegan/?action=view&current=baillietartan864.jpg");
background-position: down-left;
background-attachment: fixed;
background-repeat: repeat;
margin: 0;
}

When I previewed the page, nothing appears changed.

Please advise as to what to do further.

Thank you!

Isaac Yassar said...

@Hall: Keep the font, text-align, padding, and color settings exist, they are needed to set the body section of your blog. What we should replace is only the background setting, not the others.

carine said...

what is the size to make a bacground in photoshop,i made one for my blog,and use your tutorial to add it and this works very good, but the bacground i made is somehow to large , i made it 16 inche large and 12 inches high in a 300 pixels/per inch

Isaac Yassar said...

@Carine: I'm sorry, photoshop is not my area of expertise. However, too big or not is depending on the resolution that you use to view the blog. If you use 1024 x 768 to view a background image of 1600 x 1200, then it will be too large for sure.

Ironx said...

Can any body help me. I trying but it wont come out right. There is always a white background. i tried a lot of time please help me.

Isaac Yassar said...

@Ironx: Are you sure you have put the right codes? Don't use Picasa for this, it won't work.

Anonymous said...

I got a white background when I accidentally doubled up this line:

background:#fff url("direct URL of the image");

So, make sure you don't have that in there as a duplicate entry.

thekatsmeow said...

Thanks! I've been trying to do this for days and it finally works! Can you tell me how to add a background color or image to the columns in my blog now? lol

ABOUT ME said...

Thank you, after doing the above steps I realized that I wanted a background behind my background just like http://invictaszapas.blogspot.com/

How is this done?

Thank you!
http://photographybymarthablog.blogspot.com/

Isaac Yassar said...

@About Me: Do you mean the wooden background? It's a bit tricky, the same like my grey background. I set the body section to have grey background, and everything inside my outer wrapper to have white background. If I change my grey to a wooden background, it will work the same. You need to 'play' manually in the 'edit HTML' for that.

Sonja said...

How do I change the opacity and color of the actual box where my posts are? I would like them to be at around 80% white and I can't figure it out :-(

SiMPLY_SARAH said...

Okay, I've read your advice to the others and I still can't figure out what's wrong with mine. >___<

My template html reads this:
body {
background:#fff url("http://img83.imageshack.us/my.php?image=demo.png");
background-position: down-left;
background-attachment: fixed;
background-repeat: no-repeat;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;

Did I do something wrong? too much text? Please help >__<

http://sarangju.blogspot.com/

Thanks(:

Isaac Yassar said...

@Sonja: You need to 'play' in the edit HTML for that. The responsible section for that part is the "main wrapper", you can edit it's color or add a background image.

@Sarah: You don't use the direct link, it's a PHP link. I've checked and your direct link of the image is "http://img83.imageshack.us/img83/162/demo.png". Use it instead.

SiMPLY_SARAH said...

OMG. THANK YOU SO MUCHH<33
:D

elfatih said...

thank you man i really like your goodness in giving out some very helpful info like that, please gimme a visit!!! :)

Lauren (: said...

I have done what you have shown but it still wont work is this the right link ??

http://www.imageboo.com/viewer.php?file=x7jzf3hzgf4waadp2ent.jpg

Isaac Yassar said...

@Lauren: Nope, that is not a direct link. It is a php viewer link. You need the direct link to show your background image.

Emily Nicole said...

how do i add the image to the sidebar background too?

Isaac Yassar said...

@Emily: Do you mean you want a special image that only appear on your sidebar (not else)? Or you want your background image appear on your sidebar as well?

Laza said...

I can't get my image to stretch across the entire screen. It's currently 1502X1131 so I can't figure out why it won't fill up the screen.

Can you help?

Isaac Yassar said...

@Laza: What resolutions you are using? If you use 1600 x 900 it wont fill up horizontally. Please provide your link as well, I'll check it.

Laza said...

I don't think I know the answer to your question. My blog is http://gimmemorebooks.blogspot.com/

Thanks for the quick response!

Laza said...

I can't tell if I posted my last comment right. I'm looking for the text to fit within the box and the flowers to fill the rest of the screen.

http://gimmemorebooks.blogspot.com/

I'm using a huge monitor with 1920 X 1200, but I asked a few other people and they are seeing the same thing I am.

Isaac Yassar said...

@Laza: I see. I believe the matter lies in your image size, which is less likely to be in the size you said. I check the direct image of your image and find that it is only 1024 x 771 in size.

Perhaps it is the Photobucket limiting the size of uploaded images. Are you sure you have uploaded the image in the right size? Alternatively you can try another image hosting service like www.imageboo.com .

Laza said...

I'm officially in love with you. You were exactly right. I had to compress the photo and redo the background. I used the site you suggested and I got it work. Thanks SO much! I'm twittering you because you're unbelievably helpful.

Marcus said...

Hey!

Thanks for the tips!
I`m trying to find a way to separate the backgr colour and the wallpaper, so that I have in the right section of my page the wallpaper - in the left just a hex color. Is it possible?

Isaac Yassar said...

@Marcus: Yews it is possible. But it is very complicated, even to explain. I suggest you put the hex color in your image (edit it), it will be much simpler.

Nancy Magoo said...

I am SO confused. I managed to get the background image. But i'm wanting it to just be on the sides as now you can't see what the blogs say?

You've probably explained this to someone else but it's over my head.

Aşk Meleği said...

thank you so much your helpfull posts... when i use background on my blog i benefit from it indeed...

your imaginary friend :) said...

Hi, I'm so confused, can u help me?
I think I've already write the correct codes, but I still get the blank background :(

body {
background-image: url(http://s700.photobucket.com/albums/ww8/doodles_lover/?action=view&current=lastsummerplanner2.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

my blog:doodle-on-a-paper.blogspot.com
thank you! :)

Isaac Yassar said...

@Y.I.F:Your image link is not a direct link. It is a php link, the sign is the "?action=view&current=", see? You need a direct link for it. Uploading the image to imageboo.com will give you the necessary link.

Single Serving said...

Isaac you are AMAZING!!! THANK YOU, quick question do you know how to add a code so that the pics & entries are not on the background? Like if I remember correctly from MySpace I think it was called a hover link? I LOVE the background, I just wish it were on the sides of my page not the whole page where it's hard to make out the wording of my blog entries... THANKS

Isaac Yassar said...

@Single Serving: This method put the background image to BODY section, if you put another background image/color in POST section, you text will be easily read. The POST background will override the BODY background. It requires trial and error inside the template though, prepare to backup your template.

Jesse Camarena said...

Hey Isaac,

Thanks so much for this tutorial. It's amazing! I'm having trouble getting the picture to be full screen. Can you help with this please? Thanks

thevoicecryingout.blogspot.com

Isaac Yassar said...

@Jesse: Appearing full screen or not depends on the monitor resolution you use and the resolution of the image. Using bigger image can help, or you can repeat it like in the tutorial above.

Rozylipop said...

thank you so much! This have been very helpful!! ^^

Le-Ann Mariamlelue said...

Shukran Yassar
You've made this unbelievably simple,
Thanks for the help!
Le-Ann

Lerin said...

Wow, this is very helpful!

I have added an image to my blog: http://www.lerinphotography.blogspot.com

However, having the background makes it difficult to see the writing on my posts. Can you explain to me how to get the actual POST background to remain white? I'd still love to have the background image but want my posts to be more readable. Does that make sense?

Isaac Yassar said...

@Lerin: [First option] you can change your background image with another.
[Second option] you can edit the html template. Find post section and add "background-color: white;". Quite tricky because each template has different location of sections.
[Third option] Change your text color. Dashboard >> layout >> fonts and color

Lerin said...

Thank you again so much for your help. I will play around with my options and see what I can do. :) You've been so helpful!!!

Isaac Yassar said...

It's my pleasure to help. Good luck!

Bre said...

i'm just trying to figure out how to place an image in the background while simultaneously keeping the posting part of my blog a solid color.

how do you do that?

Isaac Yassar said...

@Bre: To do that, you need to edit the template code of your post section. Put a background image of a specific color, e.g.: white, there. So, when you put a background image in the body section, the post section will not get affected.

It's a bit tricky and requires trial and error, since each template might have different locations of codes.

If its too much for you, just put a background image that will not make your texts hard to read.

Carlos said...

Thanks a lot, Isaac, I find your explanations extremely clear and helpful.

Kristy said...

Hi there. I have been trying to update my background without asking for help, but have been unsuccessful. I have followed the directions, I think, but am having a problem Cloe (your first post) had. THe background it white....can you help me fix this???? samandkristywarren.blogspot.com

Thanks!

Isaac Yassar said...

@Kristy: I've just visited your blog and it looks good. There are this floral header background, paper white background for posts, etc. Which one did you mean by having white background?

LEASE said...

Hello Isaac this was soo helpful!!

But quick question, I would like the way top of my blog to have the same background as the rest of my page without taking out the picture I have already there. Basically what I think I am trying to say, is there anyway that I can get my background to go in back of the picture at the top?

hope its not too confusing :)

jaleesaah.blogspot.com

Isaac Yassar said...

@Lease: Glad to help.

Btw, you mean your header? I checked your blog and I think your background image is already not covering your header image.

The tutorial above puts the background image in the "body" section. Header, post, sidebar, and footer are different sections and any image there is always in front of "body" section.

Let me know if I have misinterpreted your question :D

NiNaNeRDBYaSSoCiaTioN said...

THank u soooooo much i have been tryin to figure out how to do this forever!! This was so easy to understand

Isaac Yassar said...

It's my pleasure :)

Geoff said...

Is there a way to post a background image to an individual post, and then insert a video over it? I don't want to do it to all posts....thought you might have some suggestions.

Isaac Yassar said...

@Geoff: Hi Geoff. I guess there is a way, but it requires a some HTML skills and trial-error.

Here is it: access Dashboard >> Edit posts >> edit HTML. This means that you are not editing the template like the post above, but instead you're editing the single post.

Then you can use commands like <span style="background: #fff url ("the image direct url here");">

I think the video will not get behind the image by default. So you just need to add it like usual.

Good luck on the experiment! Feel free to discuss it further here :)

Geoff said...

Thank you very much! Appreciate your help!

Cat said...

Hello Isaac -
Thank you for creating this site - you seem to be able to solve all the problems. I have tried several different ways to add a background to my blog, but I can't get it to stretch across the page no matter what I do. I followed your size specifications and uploaded it into photobucket as 1 MB and 17 inch monitor size. My blog is:

http://catezrawedding.blogspot.com/

Here is my html

body {
background:#fff url("http://i741.photobucket.com/albums/xx55/catgeraghty/weddingbackground-1.png");
background-position: down-left;
background-attachment: fixed;
background-repeat: no-repeat;

Any help you can give me is very appreciated.

Thanks,
Cat

Cat said...

Hi Isaac -
Thanks for making this site. I am having difficulty getting my image to spread across the screen. I have tried it various times to no avail. My blog is http://catezrawedding.blogspot.com/. Any help you can provide would be greatly appreciated.
Cat

Isaac Yassar said...

@Cat: You're welcome. I have viewed your image using 1366x768 resolution, and it was only about 55% of the length of my LCD. However, putting bigger image will slower the load of your blog. I suggest using small but repeated image :D

Mysty said...

Thanks for the post, this was very helpfull :)
Aldo, I never did this kind of stuff, after your instructions it was a piece of cake :D
Thanks again!

YinLoveSour said...

hello ,
can I ask is it possible to make the background position to both right and left side ?
what the codes should be ?

hope you can answer me ASAP..
thanks

Isaac Yassar said...

@YinLoveSour: I have never heard of such code. Perhaps you should edit the image instead, like making see-trough parts on the center. I heard PNG can do that.

Daniel Ng said...

Hi,
i'm helping my friend to put an image as his background...but it's too big for the screen right now...
using a dummy blog to test now ...
@ http://backgroundimager.blogspot.com/
can you help me with getting it to fit the screen? thanks!

Daniel Ng said...

i think i got it...thanks for the post!

Abijah Gupta said...

I cant thank u enough! :)

Its working....
10/10...

abijahangelicdelight.blogspot.com

thnx a ton.
-Abijah

birdie9or11 said...

hello Isaac. Sorry to bother you, but I have honestly read all the comments in trying to resolve my problem. The first time i tried it worked but now I can't get the picture I want up. My body bit reads
body {
background:#fff url("http://i792.photobucket.com/albums/yy208/birdie9or11/DeathVelley2.jpg");
background-position: down-left;
background-attachment: fixed;
background-repeat: no-repeat;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

but when the page loads the picture does not appear, please help me, thanks.

Isaac Yassar said...

Hi Birdie.

I guess it's because of the size of your image that's quite big. My browser also took some while to open your image, quite heavy to load I guess.

If I were you I will try using a smaller image (repeated) and see if it will work or not.

Anonymous said...

thank you!!you really help me so much!!easier~
a remind to others, if the background doesn't suit d whole blog is the size problems!!thx=)

Anonymous said...

Thank you very much for this tutorial. I was wondering if there is a way to make the middle area (where the text is) not have the picture background behind it?

Eye of the Witch said...

This tutorial was extremely helpful and easy to understand for me, considering english is not my first language.

Thanks!

Maren Susanna said...

I have tried and tried, but I don't understand what I'm doing wrong. Can you help me?

This is how it looks:
body {
background: #fff url(”http://imageboo.com/files/dnvyo5c2t8uwisggjire.jpg”) repeat;
background-position: down-left;
background-attachment: fixed;
background-repeat: no-repeat;
margin:0;
}

When I save, nothing happens. Help!

ScrapShana said...

Can you please help me find a way to make my background image fill the screen? It's created at 1950x1100, which is what another blog designer uses. Any suggestions would be appreciated! Thanks so much!
blog: scrapshana.blogspot.com

bounteey said...

This was very helpful.
Thank you very much!

A7X M'SIA FANS BLOG said...

Hey thnx 4 this.really helpful

Amanda Reddicliffe said...

Thanks for this awesome tutorial. I was wondering though, I have an unlimited photobucket account and can't seem to make my image any bigger (even with the 'optional' upload setting) so my background is only covering a portion of what it should... any ideas? Has the creator of the background image made a mistake or me?? :)
www.just-add-ink.blogspot.com

Tammy Horton Photography said...

I followed the steps above and still can't manage to have my background fill up the whole page. It's just floating in the middle. Here's my code

ackground:#fff url(http://i80.photobucket.com/albums/j194/tamichele/new.jpg);
background-position: down-left;
background-attachment: fixed;
background-repeat: repeat;
margin:0;

Any help would be greatly appreciated. www.tammyhortonphotography.blogspot.com

Many thanks, Tammy

Chatita said...

Thank you this help me a lot after messing up with the template. Thanks a lot again

thingame-blog said...

heya Isaac,
i am also having problems getting my pic to fill the screen.

the image i made is 1024 x 768 (or whtever - 754) i cant remember now, but it does not fill the screen, and has to repeat and looks rubbish.

THANKS

PrincessBlog said...

Hey Isaac. I don't know if you can see my blog, but it has this big white stripe now on the left hand side....can I add anything there? How? thanks.

BijouMe said...

Wow, this is great help.
All the best form Romania.

soapstar said...

thanks isaac, it works!

i (like many) did find problems getting image to fill screen. used www.imageshack.us in the end as it doesn't seem to restrict image size...

T!nK said...

Hi Isaac, On my blog I am trying to add a background, but I wanted to keep the center a solid color, is there a way to do that?

ClairvoyantDisease6661 said...

body {
background: #fff url("http://i396.photobucket.com/albums/pp41/CarlitastiC/a7x-avenged-sevenfold-bats-31000.png");
background-position: down-left;
background-attachment: fixed;
background-repeat: repeat-y;


That's what I have.
It doesn't work though.
Am I not supposed to bold it like that or something?
Please help.

Isaac Yassar said...

@T!ink: yes, set different backgrounds for different parts of your blog, like post section and outer section. It requires good knowledge of HTML coding.

@ClairvoyantDisease6661: no need of bold. Try smaller images.

Rutwik said...

so it means if i have to add my own image then i will have to first publish it on the internet right?

Russell S. said...

Thanks a ton!

SassySashadoxie said...

Sasha, the wiener dog here. You are one good human explain all that HTML code stuff so well that even a wiener dog like me could do it. Mommy got scared and kept having flashbacks to something called MSDOS and the pre-Windows days. I had her go take a chill pill while the dachshund got to work tweeking my blog. Franks A Lot! Your stuff worked and I now have a cool diva dachshund style blog. Doxie kisses to you and make sure your pet if you have one gives you a treat. :)

Ino said...

Very very helpful post, thanks a lot!
Silly question maybe, but wondering whether a fixed background or a scrolling one would make the blog quicker to navigate. Logic says fixed but I thought I might as well ask!