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

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

116 comments

Write comments
December 03, 2008 4:10 PM delete

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

Reply
avatar
AB
January 25, 2009 5:08 AM delete

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

Reply
avatar
Ankit
January 27, 2009 11:17 AM delete

Waiting 4 ur reply !!

Reply
avatar
January 28, 2009 7:03 AM delete

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;

Reply
avatar
February 10, 2009 11:47 AM delete

hello,

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

thanks in advance!

Reply
avatar
February 10, 2009 12:35 PM delete

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.

Reply
avatar
February 11, 2009 5:24 PM delete

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

Reply
avatar
February 12, 2009 6:08 AM delete

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

Reply
avatar
uni
February 18, 2009 9:06 PM delete

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

Reply
avatar
February 25, 2009 8:43 PM delete

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

Reply
avatar
February 26, 2009 8:53 AM delete

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 ?

Reply
avatar
February 26, 2009 7:59 PM delete

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!

Reply
avatar
February 27, 2009 8:30 AM delete

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 !

Reply
avatar
Anonymous
March 02, 2009 5:16 PM delete

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 !

Reply
avatar
March 03, 2009 8:34 AM delete

:)

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 :)

Reply
avatar
March 03, 2009 4:17 PM delete

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

Reply
avatar
April 04, 2009 5:29 PM delete

awesome. this helped a lot. nice work.

Reply
avatar
Anonymous
April 20, 2009 2:58 PM delete

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

Reply
avatar
April 21, 2009 10:57 AM delete

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

Reply
avatar
April 21, 2009 11:48 AM delete

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

Reply
avatar
April 29, 2009 3:05 PM delete

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

Reply
avatar
April 30, 2009 8:52 AM delete

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

Reply
avatar
May 01, 2009 2:18 AM delete

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

you know... like myspaces do!

Reply
avatar
May 01, 2009 7:54 AM delete

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;
}

Reply
avatar
May 01, 2009 12:04 PM delete

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

Regards

Reply
avatar
May 18, 2009 9:23 PM delete

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

Reply
avatar
May 19, 2009 12:42 AM delete

Hi,

Use this code:

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

Regards
Sai

Reply
avatar
D.A
May 31, 2009 2:33 AM delete

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

Reply
avatar
May 31, 2009 3:11 AM delete

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!

Reply
avatar
D.A
June 01, 2009 6:20 AM delete

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

Reply
avatar
June 01, 2009 9:04 AM delete

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;
}

Reply
avatar
July 23, 2009 6:20 AM delete

Hi guys, even i got the same problem, i just replace the background image url to the templae i downloaded from one free template site but the image is not displaying

body {
background-image:url(http://4.bp.blogspot.com/_ztAP0umdBvY/Smf6htg4tVI/AAAAAAAAAIk/K64xp3hr94M/S1600-R/bg2.jpg);
background:$bgcolor;
background-position: top left;
background-repeat: no-repeat;
background-attachment: fixed;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Reply
avatar
July 23, 2009 8:35 AM delete

Hey Paarth, upload your image at TimyPic.com instead of Blogger.

Reply
avatar
July 25, 2009 1:50 PM delete

Hi Divya Sai, I still can't get the background image, after copying the url (from the photobucket) and paste it into the HTML said before.. (after the word background). Pls help..tq in adv.

Reply
avatar
July 25, 2009 2:14 PM delete

Okay try this code intact,

body {
background: #fff url(http://i29.tinypic.com/radoyg.jpg) top center no-repeat;
margin:0;
color:#E895CC;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Reply
avatar
July 26, 2009 7:51 PM delete

It works!! Thank u sooo muchhh..

Reply
avatar
July 27, 2009 11:58 PM delete

One more thing, after changing the template, I tried to change the text font from #ffbfff to #800080, but failed. Why?

Reply
avatar
Rafael - centralfitnessblog@gmail.com
August 12, 2009 3:31 PM delete

look my background please http://personaltrainer-sp.blogspot.com/  in bog posts this background or color does not repeat until the end of the page or post

Reply
avatar
Divya Sai
August 13, 2009 7:51 AM delete

@ Rafael

In your blog, the template's <body> has a different background (which is the dark blue color) and the outer wrapper has a different background (an image with gradient blue color #2E4E60), which ultimately blends with the BODY's background color, so it is fine and actually looks good, but if you want the dark-blue background only, then delete the background code of your outer-wrapper (content-wrapper)

Here are the codes:
<pre>body {
background: #2E4E60;
margin: 0;
padding: 0px;
font: x-small Verdana, Arial;
text-align: center;
color: #333333;
font-size/* */:/**/small;
font-size: /**/small;
}


</pre>
<pre>#content-wrapper {
width: 970px;
margin: 0 auto;
height:1024px;
padding: 0 0 0px 0;
text-align: left;
background: url(http://www.geocities.com/susigan/gradient2.png) ;
;
}</pre>

Reply
avatar
August 29, 2009 10:46 PM delete

hi i have been trying to up load an image from my photobucket as a background but all it comes up with is a white background!

please help thanks in advance!

Reply
avatar
August 29, 2009 10:49 PM delete

oh and by the way the image i want is ...

http://s797.photobucket.com/albums/yy259/wolfchildsarah/?action=view&current=Mybandsss-Copy.jpg

Reply
avatar
August 30, 2009 4:30 AM delete

Don't use that link, it's not the DIRECT LINK,
use this link:
http://i797.photobucket.com/albums/yy259/wolfchildsarah/Mybandsss-Copy.jpg

BTW, the image is very small, and I don't think repeating the image will look good, so make sure that the image is not covered full by your posts/sidebar.

Reply
avatar
August 30, 2009 7:31 AM delete

@ Sai thanks!!

http://wolfchildsarah.blogspot.com/

Reply
avatar
d|n
September 07, 2009 10:26 PM delete

can i use this image http://www.flickr.com/photos/38438874@N06/3897289934/

on my background blog??
http://a1zudd1n.blogspot.com/

Reply
avatar
September 08, 2009 8:26 AM delete

Yeah you can use it...but make sure that the image is not copyrighted.

Reply
avatar
September 24, 2009 7:35 AM delete

hey, im done the 1st time xD
And, I wanted the centre Things*(Posts) to be Transparent, Can help?
http://yoshitousuirememberer.blogspot.com/

Reply
avatar
September 28, 2009 4:05 PM delete

oh my gosh, you are amazing. i just figured out so many things for my blog, using your info! thanks!
http://argarvin.blogspot.com/

Reply
avatar
November 04, 2009 9:43 PM delete

Hello Divya,

I have the same problem as other posters with trying to get a repeating background image but only getting a white page. I have done as you advised them, including copying your code verbatim, and nothing produces an image.
my code is currently:

body {
margin-top: 0px;
margin-$endSide: 0px;
margin-bottom: 0px;
margin-$startSide: 0px;
background:url (http://www.flickr.com/photos/ruarri/4076840020/) repeat;
background-attachment: fixed;
background position: 100%;
text-align:center;
font:x-small Verdana, Arial, Sans-serif;
color:$textcolor;
font-size/* */:/**/small;
font-size: /**/small;
}

and my blog is http://nuteink.blogspot.com/

Any advice would be welcome.

RDS

Reply
avatar
November 05, 2009 7:09 AM delete

The link to the image is not correct in your code.

Replace this :
http://www.flickr.com/photos/ ruarri/4076840020/

with this:
http://i34.tinypic.com/33m74w8.jpg

Reply
avatar
November 10, 2009 11:43 PM delete

Thank you Sai,
The background now works - but I don't understand what was wrong with the link.

Can you explain so I can add other elements?

Reply
avatar
November 11, 2009 8:04 AM delete

You should use direct links to images, whenever using them in templates. The flickr link you were initially using isn't a direct link to your image, if you go to that address, then you'll see the image of your interest in the center of that page(along with some other text/adverts etc.), but if you open the tinypic image link I have given, then you'll see that the page consists of only that image and nothing else. From now onwards, whenever you want to display images in any templates/widgets eetc. you should only use direct links to the images, and for this use tinypic.com (it is better if you open a free account in it and store all your images here).

Reply
avatar
November 11, 2009 8:07 AM delete

@Ruarri

To make sure that a link to an image/file is a direct link, simply look at the ending part of the link.
In 95% cases, the link will end with the same extension as that of the file ()like .jpg or .png or .gif or .pdf etc.

Reply
avatar
December 21, 2009 12:50 AM delete

how do you make your background only show on the sides?

Reply
avatar
January 10, 2010 10:27 AM delete

I would like to know as well how to make the background only show on the sides!!

Reply
avatar
January 11, 2010 1:29 PM delete

Hey there sorry, I forget to reply to your queries.

The background in either my blog or yours is applied to the entire blog and not just to the sides.

You have to use some other color in the center that will overlap the background, and therefore the background will tend to appear only in the sides. In my next comment I will tell you the code where you have to add the overlaying color codes.

Reply
avatar
January 11, 2010 1:36 PM delete

Here's the code:
Find this code in your template:

#outer-wrapper {
...
...
...
}


Instead of those dots, there'll be some other code in there.

Now replace one of those 3 dots (or add a new line) with this, so the code becomes this:

#outer-wrapper {
...
...
...
...
background: #ffffff;
}

where #ffffff refers to color-white, so your blogs center area will now become white and the background will appear only in the sides.

Feel free to comment here, in case of more doubts.
Happy blogging :)

Reply
avatar
January 15, 2010 3:31 AM delete

Wow - best tutorial EVER - and I am so not HTML savvy. Thanks so much!

Reply
avatar
January 17, 2010 2:40 PM delete

goodday
i would like to ask for help but i need to copy and paste and i don't know why it doesn't work here :s

Reply
avatar
January 18, 2010 5:50 PM delete

Hello, I've read your instructions on how to add a background image to blogger, but it still only shows my background as a white page. I've made sure that my image link is a direct link, so I don't know know what's wrong. My coding is this:

body {
background: url("http://i40.photobucket.com/albums/e215/livinlies/BG-Puzzle-White-Faded.jpg") top center
repeat-y;
background-attachment: fixed; margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}


I hope you can help.

Reply
avatar
January 19, 2010 4:55 AM delete

Yes buddy, I can help you, but only after having a look at your blog...coding is fine, but it would be better if I can see the code live on your blog.

PS: Your Blogger profile is not showing up.

Reply
avatar
February 06, 2010 3:15 PM delete

Hello Divya,

I have the same problem as other posters with trying to get a repeating background image but only getting a white page. I have done as you advised them, including copying your code verbatim, and nothing produces an image.
my code is currently:

body {
margin-top: 0px;
margin-$endSide: 0px;
margin-bottom: 0px;
margin-$startSide: 0px;
background:url (http://www.flickr.com/photos/ruarri/4076840020/) repeat;
background-attachment: fixed;
background position: 100%;
text-align:center;
font:x-small Verdana, Arial, Sans-serif;
color:$textcolor;
font-size/* */:/**/small;
font-size: /**/small;
}

and my blog is http://nuteink.blogspot.com/

Any advice would be welcome.

Reply
avatar
February 06, 2010 10:46 PM delete

@Melissa,

Just change the link:
http://www.flickr.com/photos/ruarri/4076840020/

to this:
http://farm3.static.flickr.com/2446/4076840020_c995d06725_o.jpg

in that code, and save your template. Hope that helps.

BTW, does that image belongs to you?

Regards
Sai

Reply
avatar
February 21, 2010 8:39 PM delete

Hello

I'm a new blogger on the block and tried to follow your tutorial but could not get the background image.
Could you please tell me what i am doing wrong:

body {
background:url(http://s850.photobucket.com/albums/ab65/teresabelmonte/?action=view&current=Imagem1.jpg)repeat;
margin:0;
text-align:center;
line-height: 1.5em;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
}

Reply
avatar
February 22, 2010 9:45 AM delete

The image link you are using is not a direct link, use this one instead:
http://i850.photobucket.com/albums/ab65/teresabelmonte/Imagem1.jpg

so, the code becomes:

body {
background: url(http://i850.photobucket.com/albums/ab65/teresabelmonte/Imagem1.jpg) repeat;
...
...
...
...
}

Reply
avatar
February 22, 2010 11:40 AM delete

Thank you very much!!!
It worked like a charm!
The thing now is that the post area and sidebar apparently were transparent....How can i add collour to them?

Reply
avatar
February 22, 2010 11:49 AM delete

What's the blog address, on which you are working?

Reply
avatar
February 23, 2010 9:06 PM delete

Hi Divya it's: http://flappersmoleskine.blogspot.com
and the post area and sidebar are transparent and i would like to add color so that the background image would only show on the sides

Reply
avatar
February 24, 2010 12:33 AM delete

Try editing two codes, separately, first try changing this one:

#outer-wrapper {
margin:0;
padding:22px;
text-align:left;
font: normal normal 100% Trebuchet, Trebuchet MS, Arial, sans-serif;
}


to this:

#outer-wrapper {
background: #FFFFFF;
margin:0;
padding:22px;
text-align:left;
font: normal normal 100% Trebuchet, Trebuchet MS, Arial, sans-serif;
}


Save the template and if you don't like the overall look, then change this again edit your template, delete the line you just added (background: #FFFFFF;) and edit this one:

#main-wrapper {
margin-left: 2%;
width: 67%;
float: left;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


make it:


#main-wrapper {
background: #FFFFFF;
margin-left: 2%;
width: 67%;
float: left;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Reply
avatar
lynn
March 02, 2010 11:53 AM delete

HOW do I get the post area and sidebars transparent do the background pic show thru??

Reply
avatar
March 02, 2010 1:05 PM delete

Hello? Just Wanna Ask That what Actually My Problem?
The Whole BackGround Is Became White After I Made This-
body {
background: url('http://ul.to/mpyqoy') repeat;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Can Tell Me What Had I Done Wrong???
Thanx...

Reply
avatar
March 07, 2010 4:51 PM delete

@lynn
your blog address?

@我
Which one's your ealier comment?

Reply
avatar
March 07, 2010 4:51 PM delete

@Mintz,
presently you are using this:
background:#191919;

and the code you gave to me, in that this line is wrong:
background: url('http://ul.to/mpyqoy') repeat;

correct code is this:
background: url('http://i48.tinypic.com/2wpibkl.jpg') repeat;

Reply
avatar
March 09, 2010 4:39 PM delete

ok thanks... By The way how I can get the correct code?
How you get the correct code?

Reply
avatar
March 26, 2010 12:42 AM delete

Thank you very much for this tutorial, I followed your instructions and it worked really good!

Reply
avatar
March 26, 2010 7:41 AM delete

Hi! I'm having a problem uploading my image to the background of my blog. I have followed step-by-step the above procedures, and still the background is white.

I rechecked my link to my picture -- and it is a direct link.

Can you tell me what I'm doing wrong?

Picture: http://i40.tinypic.com/15nvuwy.jpg
Code: background:url(http://i40.tinypic.com/15nvuwy.jpg);

Thanks!

Reply
avatar
March 26, 2010 12:58 PM delete

Hi Eleine,

First of all do not use a large image, if you want to show just a pattern as a background image, rather use a small image with repeat function (that will load faster). So, use your photobucket image rather than the tinypic image.

If you are talking about your practice template then instead of using this code:

body {
background:url(http://www.photobucket.com/albums/ab135/TanyaH10/dreamstime_drops_background.jpg);
background-repeat:no-repeat;
background-position:120% 10%;
background-attachment:fixed;
margin:0;
color:#333333;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}


use this:

body {
background:url(http://www.photobucket.com/albums/ab135/TanyaH10/dreamstime_drops_background.jpg) repeat;
margin:0;
color:#333333;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Reply
avatar
March 26, 2010 1:41 PM delete

Hi Sai!

Thanks so much for getting back so quickly! I recopied the new code into the editor, but it still is ending up with a white background.

So, I did go back and crop the background image smaller to see if that would help, and it still didn't.

I'm playing around with the practice template to see if I can create my own blog skin to replace the downloaded template I have on another blog site. So, I appreciate all your help with this!

Thanks again!

Reply
avatar
March 26, 2010 1:54 PM delete

Hey there,

change the url in the code from this:
http://s857.photobucket.com/albums/ab135/TanyaH10/?action=view&current=dreamstime_drops_background_sm.jpg

to this:
http://i44.tinypic.com/fxz5i0.jpg

Reply
avatar
Anonymous
April 04, 2010 4:03 PM delete

hmm I get a white background when I change it...

Reply
avatar
April 05, 2010 2:28 PM delete

Not sure if anyone has asked I don't see it in comments. But what if I wanted to hyperlink the background image, how would I go about coding that in?

Here is my test site I have been playing around with.

http://thespringborovoice-jhhssports.blogspot.com/

Thanks so much for this post it has helped tremendously!!

Dominic Gross

Reply
avatar
April 10, 2010 5:24 PM delete

Wondering if you could help me, I am new to this and using a prebuilt background with graphics on the side and white center(all one image) and on some monitors the posts look shifted in ref to background image, is there any way to fix that? the post is at http://DreamInBLU.blogspot.com

Reply
avatar
Anonymous
April 18, 2010 11:09 AM delete

how do i resize the background image

Reply
avatar
April 22, 2010 8:20 AM delete

i have tried all the suggestions and i am new to blogging and i would like to know what i have done wrong
body {
background: #FFFF url(http://s885.photobucket.com/albums/ac51/gossipgirlxo15/?action=view&current=gossipgirl.jpg) top center no-repeat;
margin:0;
color:#E895CC;
font-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Reply
avatar
April 22, 2010 9:10 AM delete

Hi there,
The only error in the code I can see is with the url of that image.
Use this url instead of the one you are using right now in that code:
http://i885.photobucket.com/albums/ac51/gossipgirlxo15/gossipgirl.jpg

Reply
avatar
May 08, 2010 5:16 PM delete

Hi,I found this website and it is great;i have tried to put a background image on my blog but instead of having the whole image on the background,i am having it only on the center;can you please help me to figure this out?thank you

the blog is at http://madhatterboutique.blogspot.com/

and the code is

body {
margin: 0;
padding: 0;
border: 0;
text-align: center;
color: $mainTextColor;
background: #bba url("http://img708.imageshack.us/img708/5189/fundalmadalina.jpg") top center repeat-y;
font-size: small;
}

img {
border: 0;
display: block;
}

.clear {
clear: both;
}

Reply
avatar
May 14, 2010 7:58 PM delete

how do I add a custom gif picture as a border frame for the images I upload? thanks :)

Reply
avatar
May 18, 2010 6:23 PM delete

thanks for replying! I know how to do the borders,I meant how to add a custom frame,instead of a border,an image i create myself as a border around photos :) Any help?

Reply
avatar
AE
July 22, 2010 12:14 AM delete

Very Helpful!

You should post that comment about scrolling vs non-scrolling background. That really helped me.

Thanks!
www.aliaseternal.net

Reply
avatar
August 21, 2010 12:51 PM delete

Can you tell me what I'm doing wrong? I'm coming up with a white background, but I'm using the direct image link.

body {
background:url('http://i960.photobucket.com/albums/ae86/nicolemjohnson/hbb-4thofjuly3.jpg') repeat;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Reply
avatar
August 21, 2010 2:34 PM delete

Hi there, what's your blog address?

Reply
avatar
Anonymous
October 28, 2010 7:14 PM delete

Hi! How can I create a custom background (with images) for my blogger (blogspot) with photoshop? Can you help me please?

Thanks,
Mary

Reply
avatar
October 30, 2010 6:06 AM delete

Save the images in .jpg or .png or .gif format and follow the above tutorial to use those images as your blog's BG.

Reply
avatar
December 31, 2010 3:58 AM delete

Hey. It worked but not completely :(
I really hope you can help me A.S.A.P.
My background changed but it doesn't changed from the top to the bottom. Instead, the top part of my blog is still my original background.

Here's my blog: http://www.gaunbiru.blogspot.com/

And here's my code:
/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
background: url('http://i168.photobucket.com/albums/u181/chocolatebar_2007/yo.jpg') repeat; $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}

html body $(page.width.selector) {
min-width: 0;
max-width: 100%;
width: $(page.width);
}


I am so bad in HTML. so please, help me :)

Reply
avatar
January 02, 2011 5:39 PM delete

Hi, I've been scanning the internet and I've tried the tips you've gave but nothing is working.
The only code that I can find in my blog HTML is .....
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}

I have a URL for my image but it doesn't seem to work, please help :((

Reply
avatar
January 28, 2011 9:01 AM delete

can you help me, I'm also having trouble uploading my image to as a background. Here's my part that needs editin':

body{
background: url('http://img502.imageshack.us/img502/6686/blogwall.jpg')no-repeat;
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
color:#000000;
}
a:link {
color:#CD1504;
text-decoration:none;
}
a:visited {
color:#CD1504;
text-decoration:none;
}
a:hover {
color:#CD1504;
text-decoration:underline;
}
a img {
border-width:0;
}

You see, after I added my pic's URL on the ''background: url('http://DIRECT_LINK_OF_ANY_SMALL_IMAGE') repeat;'' line, I tried to preview it but only to see a large loading Blogger sign. Is ti normal? should I wait?(and I've waited fro an eternity, trust me.)

Is it because my image is to large? it's around 260 KB.

Owh, I also uploaded the image in Imageshack. It's here.
http://img502.imageshack.us/img502/6686/blogwall.jpg

And how do I do paste the picture so that it doesn't scroll down and skeep it floatin' or something.

Sorry, I'm quite noob on the HTML.

Sincerely need help.

Reply
avatar
April 03, 2011 10:54 AM delete

plez help me...howw to change the background image?i wwant using my own image..

Reply
avatar
April 24, 2011 6:33 AM delete

with.....much effort i am not able to change the background image of my blog...my blog is http://himanshu-software.blogspot.com if anybody have any suggestion then please mail me at hgogoi2012@gmail.com......also wat improvements are required in my blog please tell me........:)]

Reply
avatar
July 01, 2011 7:13 AM delete

Really Your Post is very good and helpful. i am very happy to read your post. Keep update I will return soon. My webstie World Cup Cricket
Here Most Important link list
Unlimited Backlink Free

Open a USA Bank Account Free
Thanks

Reply
avatar
July 08, 2011 7:17 AM delete

Awesome......That's good Crimson.It is a very informative and
helpful.Thanks for the wonderful post.........

Reply
avatar
August 08, 2011 7:19 AM delete

article is very useful for me

visit:

http://internetricks4u.blogspot.com/

Reply
avatar
September 16, 2011 5:21 PM delete This comment has been removed by the author.
avatar
September 16, 2011 5:26 PM delete

I'm wrong, it isn't a space issue, my post text has completely disappeared, but I can't tell why!!!

Reply
avatar
September 29, 2011 11:11 PM delete

cant understand? i want to add some images background to my blog site? how can i do that?

Reply
avatar
unknown
October 26, 2011 11:30 PM delete

why i cant change my blogger background?

Reply
avatar
December 20, 2011 11:32 PM delete

That is nice help indeed.Knowing html to control page in the internet is obviously very essential and there is so much help from the professionals you could pick them up soon.

Reply
avatar
October 02, 2012 10:39 PM delete

Where in the world is the layout button

Reply
avatar
October 14, 2012 9:23 PM delete

Thank You for Your information. I'm a bit late i suppose but could you have a look at my website? there's definitely something wrong there :( i've done all you said above and used imageshack for my url, but no result what so ever. Could you pm me and so i can send you the code? I've made my own template with artisteer...troubles me for almost a week now. Don't know what to do. Thank you in advance.

http://organicoilmassage.blogspot.com

Reply
avatar
March 14, 2013 8:08 PM delete

Great article. Well written and very useful. Thanks a lot!

Billing problems? Check this out:
physician medical billing services
Preferred services by most physicians

Reply
avatar

Comments are moderated on this blog

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

Comment Like This! and Optimize your blog EmoticonEmoticon