How to add/change background Image In Blogger


With the recent drop in prices in computer hardware, including monitors, a number of people have shifted from 15" or 17" to 19" or even to 22" monitors, and so they usually set their screen resolutions to 1024x768 or higher. But that doesn't mean there's no one with resolutions lower than 1024x768.





If you see the stats of my own blog, then out of 500 visitors, approximately 50% of them have 1280x1024 resolution, but another 50% of visitors have either lower or higher than that.
Mostly people optimize their blogs for a screen resolution of 1024x768 or 1280x1024, as maximum visitors usually set their screens at this resolution. Now visitors with lower resolutions will see two scrollbars at the right corner and at bottom.
But a problem may arise with visitors with higher resolutions, as they will see a blank space in the corners and edges of the screen, which may spoil the overall look of the blog.
To avoid these circumstances, you should add a background image to your blog.

Blogger, by default gives a background color, which looks very boring so follow these steps to change it and show a beautiful background image.

Log in to Blogger, then go to "Layout" section, now click on "Edit HTML" link.
Then find this line:

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: #fff;
background: url('http://www.................png') repeat;
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;
}
or

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

The code may not be exactly the same, so search/find for "background", by CTRL+F method, and check if it is the background: part of "Body {......"

Now change that background line to like this:


background: url('http://DIRECT_LINK_OF_ANY_SMALL_IMAGE') repeat;

The background image will not be displayed in Internet Explorer, if you do not give "space" after the url bracket closing and repeat.

You can use download images from here:
Background Images 1
Background Images 2

34 comments:

Urban Male Mens Jewellery said...

Hey thanks for this, followed it and it worked out well and I am normally rubbish at this sort of stuff! cheers stu

AB said...

When I apply this...I am getting gradient to whole page...instead of only at sides.

See this :

http://i719.photobucket.com/albums/ww200/bajaj151/Errorimage.jpg

Ankit said...

Waiting 4 ur reply !!

Divya Sai said...

Hi Ankit

Keep the background as it is....

You'll find this in the template:

#outer-wrapper {
margin: 0 auto; /* to make the template lay in the screen center */
***
***
***
***
}

Now one of those *** will be background, if it is not there, then add one:

background: #ffffff;

zaumi said...

hello,

how can i add a background image which doesn't move when you're scrolling down the page?

thanks in advance!

Divya Sai said...

Hi Zaumi!

You'll find something like this in your template:

body {
background: url(http://****.jpg) repeat;
margin: 0;
padding: 0px;
font: normal normal 90% Trebuchet, Trebuchet MS, Arial, sans-serif;
text-align: center;
color: #EFEBEB;
}



Now modify it like this (ADD the BOLDED line in to the code)

body {
background: url(http://****.jpg) repeat;
background-attachment: fixed;
margin: 0;
padding: 0px;
font: normal normal 90% Trebuchet, Trebuchet MS, Arial, sans-serif;
text-align: center;
color: #EFEBEB;
}


NOTE: If you use a big image (of 1024x768 or 1280x1024 or 1600x1200 resolution), then there's no need of repeat in the code line background.

zaumi said...

thank you so much!

but i got another problem ^^
there is a picture on the right side of the blog (berlinfixed.blogspot.com) and you should notice the white bar between each portrait... i made it already transparent with photoshop but blogspot somehow changes it to whit again! is there any way to let the background shine through those bars?

cheers

Divya Sai said...

Well why don't you simply break that big picture in to smaller pictures and add a break <br /> between them.

uni said...

Thank you, i manage to change a background thanks to your explanation!Great blog!

Divya Sai said...

Welcome uni !

Regards
Sai

POWDERED SUGAR PHOTOGRAPHY said...

Hi!
I tried to follow this, and for some reason on a laptop monitor or anything with a lower resolution, my blog will not center...

any help?
http://powderedsugarphotography.blogspot.com

Divya Sai said...

Hello,
I ckecked your blog at lowest possible resolution of my screen(800x600), and found everythiung in place, can you send me the screenshots of your blog at low res ?

Ania Wawrzkowicz said...

how can i add as a background image that i ve created in photoshop ? What size should it be and is there a way to do that? Thanks in advance!

Divya Sai said...

Hi Ania...

First of all save it is as a .gif or .jpg image.
(make sure the image is not very heavy (not more than 100-150kb))...

Now if the image is very small (a 100x100 or 300x200 image), then use repeat in the code.

If the image is very big, then use no-repeat in the code.

Now regarding the BIG IMAGE, you have to consider some points:

First check, what screen size does your maximum visitors have (usually it'll be 1280x1024 or 1024x768), then use an image of that size only.

then go to 'my computer'->'settings' in your computer and check yourself, your blog in differnt resolutions, as it is very important that the BG image should not look bad in any resolution.

In case you want to use a big image, then I'll recommend a 1024x768 size.

Anyways, my first preference is always any small image with repeat tag....as it'll adjust with any screen resolution....


In case of any further doubts, feel free to ask here !

Anonymous said...

Hi Thank you for your reply but I still don't really understand where do I attach image latter on to appear as my background ? You said previously that you change the lint to that background: url('http://DIRECT_LINK_OF_ANY_SMALL_IMAGE') repeat;
but if my image is saved as just for example a1.jpg on my computer on the desktop it has no http link to attach to it.. Sorry if its a silly question but I don't really understand that part most of all. Example of a bloggspot background that i really like and would like to create something along those lines but simpler. http://poppytalk.blogspot.com/
THANK YOU !

Divya Sai said...

:)

Of course you are not going to get any http:// adress for your image, if it is stored on your pc, do this:
1. Open the website :
http://gigaimage.com

2. Browse for your image (located in your pc), and upload it to gigaimage.com

3. Now in the next screen, you will be shown many links for your image, FIRST link from that list will be a DIRECT LINK to your image.

4. Now copy that link and paste it in the code above...


Doesn't matter how silly you think your questions are, feel free to ask them, so there's no need to be anonymous,
I like to know my visitors :)

Ania Wawrzkowicz said...

Thanks ! Will try to do that at one point with my blog!

Divya Sai said...

Welcome Ania...

Biggest Hannah Montana Fan said...

awesome. this helped a lot. nice work.

Anonymous said...

ok so i've cahnged the line in edit html,

i've used your link to downlaod backgrounds.

BUT know what do i do

PLZ HELP

devon said...

THANKS! this really helped.
i used it on my blog devondotcom.blogspot.com
check it out!

Karla said...

Wow! Thanks so much. I had been trying linking from picasa with no success. And your tip of going to gigaimage.com really was the only thing I had to fix. Thanks for the link and great tutorial!

karla

Divya Sai said...

Welcome guys :)

the_jcw said...

Hi, I hope you can answer my question. I am very slow with anything HTML and I need some assistance.
my blog is thejcw.blogspot.com

I would like to add a background that will show through only on the sides and white will stay where the blog is the whole time. really similar to this site: http://www.recycledwax.blogspot.com/

I would really appreciate the help

Divya Sai said...

Hello...

Here's is the bacjground being used in that blog:
http://www.themaxwax.com/blog/centreblog.jpg

BUT DO NOT use it (it may be copyrighted).
Just use it as a reference, create or download your own similar image, make sure that the image is large enough (at least 1280x1024 or 1600x1200) and the central white area should be equal to the width of your post area (744 in your case & 696 in their case).

Then upload the image to gigaimage.com or boxstr.com and use the DIRECT LINK in the code above and then to keep the background fixed, add the code from my reply to Zaumi (6th comment of this post)

Regards
Sai

Crimson Fatale said...

What if i want the background image to adjust to the browser's window??

you know... like myspaces do!

Crimson Fatale said...

Well i figured out something useful, just added this (after the bg url) and it worked like I wanted :p

body {
background: url("background-url") top center
repeat-y;
background-attachment: fixed;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Divya Sai said...

That's good Crimson.....made my work easy ;)

Regards

Robert Pattinson Fan said...

I don't want the image to repeat, what do i type in the code??? Thanks!

Divya Sai said...

Hi,

Use this code:

background: url('http://DIRECT_LINK_OF_ANY_LARGE_IMAGE') no-repeat;

Regards
Sai

D.A said...

Hey guys...i did what it said but i'm still not getting the picture. Instead I'm getting a white background...even the color i had previously dissapeared. :(( Any idea what happened.
see
body {
background: url(http://3.bp.blogspot.com/_9P530_h2aMc/SiIZxZiZX2I/AAAAAAAAAPo/-KbIbvlDObc/s1600-h/BACKGROUND.bmp) repeat;
background-attachment: fixed;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Does it have anything to do with the picture being .bmp?
Thanks
D.A

Divya Sai said...

Replace the image-link you are using
from
http://3.bp.blogspot.com/_9P530_h2aMc/SiIZxZiZX2I/AAAAAAAAAPo/-KbIbvlDObc/s1600-h/BACKGROUND.bmp

to this one:
http://3.bp.blogspot.com/_9P530_h2aMc/SiIZxZiZX2I/AAAAAAAAAPo/-KbIbvlDObc/s1600/BACKGROUND.bmp

that's it!

D.A said...

No luck dude. It didn't work. It's still the same way. :S White background. see www.blackdiamondsofdeath.blogspot.com

Divya Sai said...

Quotes are supposed to be there inside the brackets, try this code:

body {
background: url('http://i44.tinypic.com/245cx9c.jpg') repeat;
background-attachment: fixed;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
}

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Allowed HTML tags: <b>, <i> and <a>

Recent Posts

Regular Readers

Popular Posts

| © 2009 BloggerStop.net | Template by Dicas Blogger | Enhanced By Divya Sai |