December 3, 2008

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:

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?

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 !

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)

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)

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:

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

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.

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.

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:

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:

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:

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

i have tried all the suggestions and i am new to blogging and i would like to know what i have done wrongbody {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;}

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

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

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.

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

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.

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

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.

Regular Readers

What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.- Stacey @Pets With AllergiesI stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.- Cheryl @Cmash Loves To Read