114 How to use a background image for your blog

Instead of a simple background color, you could use a background image for your blog. This could be styled to look like wallpaper, it could repeat only vertically or horizontally, and can even be in a fixed position where it stays in place while the rest of the page scrolls down!

In this post, I will explain the how you can use background images for your blog using these different methods, with examples to demonstrate how the various effects can be achieved.

You can use virtually any image as a background for your blog. Usually background images are in JPEG format, though you could also use GIF's or BMP's. However, you must be able to host the image on an external server, as Blogger only hosts images which are contained in widgets or posts. If you're looking for free image hosting, take a look at this post.

Before you begin to add the image to your background, find the image you would like to use, and make a note of the url where it is hosted.

As I mentioned in the introduction, there are different ways you can use background images. Here I will explain:

  • How to make an image repeat across the whole page (like wallpaper)
  • How to make a background repeat vertically down the page
  • How to make the background repeat horizontally across the page
  • How to create a fixed image background (which does not scroll with the rest of the page
All of these methods are possible in Blogger Blogs, and are quite simple to achieve.

How to make make an image repeat across the whole page (like wallpaper)

This is the simplest of all background effects to achieve. Most people prefer to use a small image which tiles seamlessly. This ensures that the page loads faster, since the image has a small file size.

You can easily find such images for your background by doing a Google search for tileable backgrounds, or could even create your own.

I created this simple image to use as an example, though you could just as easily use any other image:

To make this image a tiled background for your blog, go to Template>edit html and look for the styling properties for the body of your blog, which should look something like the example below:

body {
background: $bgcolor;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
We need to edit the line highlighted in bold, which is where we declare the background properties of the blog. To add a repeating image to the background, we simply add the following (highlighted in red) to the body properties:
body {
background:url(http://www.imagehost.com/yourimage.jpg);
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Where the URL of the image matches the URL of your background image location.

This will make the background image repeat across the whole page, like the example below:

If you prefer, you can also view the whole demonstration page here which offers a better view of the overall effect then the iframe above.

How to make a background image repeat vertically down the page

This involves a slightly different addition of code to your template, but is essentially the same principle. Again you should find the "body" style declaration in your template and add the url for your background image. Also, you need to declare that the background will repeat on the "y" (vertical) axis, as in the example below:

body {
background:url(http://www.imagehost.com/yourimage.jpg) repeat-y;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Using the same example image as before, this will create the following effect (or look here for a full page preview):

How to make a background image repeat horizontally across the page

This is very similar to the method we used to tile the image vertically. However, this time we tell the browser to repeat the image on the "X" (horizontal) axis, like this:

body {
background:url(http://www.imagehost.com/yourimage.jpg) repeat-x;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

This will produce an effect like the example below (use this link for a full page preview):

How to create a fixed image background

Usually a larger image is used for this method, so for this example we will use the following image from Pyzam.com):

To ensure this background image does not repeat, we need to add the "no-repeat" declaration to the background properties. Also, we need to add the statement that the background attachment is fixed, so that the background does not move with the page. Here again is an example of what your code should look like, with the changes highlighted in red:

body {
background:url(http://www.imagehost.com/yourimage.jpg) no-repeat;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-attachment: fixed }
And here is the example of what this property achieves (use this link for a full page preview):

You can add color too!

Unless you tile your background image across the whole page, you will be left with blank white areas. To fill these areas with the color of your choice, you should also add color to the background property.

If you already have a "$bgcolor" variable in your blog template, you can simply add this variable to the background properties, like this:

background: $bgcolor url(http://imagehost.com/yourimage.jpg) repeat-x;
However, if you do not have this variable in your template, or instead would prefer to declare the color yourself, you can do so using Hex values for the color you wish to display. There is a useful color calculator in the tools section which can generate the hex values require. Here is an example of how you can declare the hex values for the color in your background:
background: #ff0000 url(http://imagehost.com/yourimage.jpg) repeat-x;
Using the first image as an example, this would generate a background like this:

Positioning the background image

By default, the background image will begin in the top-left corner of the page, regardless of how you want the background image to repeat (or not) across the page. However, you can specify where you would like the image to be placed by adding some extra variables to the background specifications.

Here is an example of the bldy's background property to show where you can place the positioning variables:

background: #ffff00 url(http://imagehost.com/yourimage.jpg) positioning-variables-here no-repeat;
And here is a list of the positioning variables you can use:
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

If you wanted to position a fixed image at the top center of a page for example, you could use the following code:

background; url(http://imagehost.com/yourimage.jpg) no-repeat top center;

It is also possible to set the starting position of the background image using percentages on the X or Y axes, or by specifying the distance in pixels from the top or left of the page. However, this can be rather complicated, and since people use many different browsers and screen resolutions when browsing the internet, this can cause serious problems for blog design! If you would still like to know more about this, I would recommend reading the information on the CSS background page at W3 schools.

I hope this tutorial has helped you understand how to use background images in your blog, and covered all aspects of how these different effects may be achieved. As always, your comments and opinions are much appreciated!

If you would like to receive updates of new tutorials and posts from Blogger Buster, please consider subscribing to our feed.

Technorati Tags: | | |

Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Like to share?

You may also like to subscribe to Blogger Buster's RSS feed or receive free email updates of our latest posts.

114 comments:

  1. Hi Amanda, I just discovered your blog and found tons of information. I'm still learning how to design my own template and found your posts very helpful. Thank you for sharing these infos. Newbies like me find it easy to learn these things through your tips. :)

    ReplyDelete
  2. Hello Babette,

    Thank you so much for your comments! I'm glad to know these tutorials are useful for you, and would welcome any suggestions you may have for posts which I could write to offer further help to new bloggers.

    Best wishes,

    Amanda

    ReplyDelete
  3. Hi! Great tutorial! Thanks so much. Can you tell me how to make it so that my background only shows up outside of the page elements? For example, I only want to see a patterned background outside my side bars. Does that make sense? Thanks so much for your help. :)

    ReplyDelete
  4. Hmmm...I am trying to keep my background fixed and when I add the tags, my background is going all white. What am I doing wrong?

    ReplyDelete
  5. For Sassygirl: I think we're on the same wavelength here... If I'm right, you would need to add a plain background color to the "content-wrapper" in your <b:skin> section as well as the background image for the main body section (I hope this makes sense!).

    If you'd like me to explain the changes in full for you, send me an email and I'll email you the code changes to help you achieve this.

    For Cammie: Most likely, the code to display the background image is slightly off. Double check your code to make sure you haven't accidentally left out a quote mark in the URL for your image.

    If you're still having problems, let me know what code you are using for the background image and properties, then I can help you fix this more easily.

    Best wishes to you both and thanks for stopping by!

    ReplyDelete
  6. I would like to also have a plain section for my posts and such with a different, custom background image for the "content- wrapper" of my blog and need some help with the code for that.

    ReplyDelete
  7. For Patti: If you would like to send me an email, I can send you full instructions for how to achieve this.

    Hope this will be useful for you :)

    ReplyDelete
  8. Wow, thank you for this tutorial! Found you while searching how to get a custom blog background and this is exactly what I need.

    I am trying to put my own custom drawing as a "fixed image" background. I'm wondering how this needs to be sized? I'm just going to draw it on 8 1/2 x 11 paper, but wondering if I need to resize this in photoshop?

    Thanks for your help!

    ReplyDelete
  9. Hi, Amanda. Like the two ladies above, I have the same trouble. I'd like the post, the header, and the sidebar areas to have a plain white background, but the rest I'd like to use wallpaper background on. I just emailed you. Thanks for everything!

    ReplyDelete
  10. Also, does this only work with jpegs? I tried with a .png file and it's not showing up.

    ReplyDelete
  11. Amanda,

    You ROCK!!!! Thank you, thank you, thank you!

    I couldn't find a background for my blog that I liked on the web but created my own thanks to your easy-to-follow instructions! I hope you'll get a chance to check it out.

    I plan to write a post about this website and share it on my blog.

    Also, is there a button I could add to advertise for you?

    Thanks again!

    ReplyDelete
  12. My background is not showing up. I've tried various people's instructions to no avail. Could you please email me and let me send you a word doc with my code? aprilhwth@gmail.com
    I hope you find time to help. Thanks for this article!!

    ReplyDelete
  13. True newbie here! I followed the instructions for changing the template....but have no idea how to import the picture? Sad but true!

    ReplyDelete
  14. You have helped us so much. Our whole family changed our blog to 3 columns thanks to you!

    ReplyDelete
  15. I created a test blog! This worked perfectly! Thanks.

    ReplyDelete
  16. I love your blog but this just isn't working for me! I know it's me that's doing something wrong. I have hosted my image and it's appearing, but very small in the upper left-hand corner of my blog. I sized the image at 718 pixels wide...what am I doing wrong?

    ReplyDelete
  17. I keep getting this message:

    More than one widget was found with id: Feed2. Widget IDs should be unique.

    ReplyDelete
  18. I tired to put a picture as a background for my blogger but after I did it, a little space can be seen on the right side. How to I make the picture to cover the whole background like the one in http://yumeiasdreamspace.blogspot.com/?

    ReplyDelete
  19. Wonderful blhttp://famouspharaohs.blogspot.comog. My blog is

    ReplyDelete
  20. This comment has been removed by the author.

    ReplyDelete
  21. I tried it and i get the default background color. (#ffffff) i thought oh, i'll make it transparent, so like ive seen elsewhere, i tried "transp" and it was denied. i tried putting in just the "#" and it wouldn't let me do that. i tried putting the image url in there and replacing "bgcolor" with "bgimage" and i tried "bgimg" and nothing worked. Can you help me? ps- thanks for the blog. pps- in case you have no idea what i am talking about which is highly probable, it was at the top in "Variable Definitions" Section at the top. i was talking the lne of code that says

    < Variable name="bgcolor" description="Page Background Color"
    type="color" default="#fff" value="#ffffff" >

    Can you help me? thank you so much! - mr. chrissy

    ReplyDelete
  22. whoops! nevermind! i forgot the ; at the end. thank you so much!!!! - mr. chrissy

    ReplyDelete
  23. tanxx i really appricciate that or whatever it is called anyways! thanks another time!

    ReplyDelete
  24. heyaa there. 1st I want to thank you a lot for the info. I searched it through google & found yours, it was damn useful, thanks to you.

    ReplyDelete
  25. thank you very much! this post was really helpful :)

    ReplyDelete
  26. thanks. very helpful. now i can implement it in my own template here at simple-blogger-templates

    ReplyDelete
  27. Hi Amanda, thanks so much for putting all this info together for us newbies..lol..I would like my background pic to fill the screen, but no matter what I try, I still get white stripes on the sides...Can u please help me???

    ReplyDelete
  28. Greetings, first of all thanks for all the information, it was recent that i discover your blog.

    I have the same problem tha Cammie has, my background is going all white, this is the code That im using for the background image:

    body {
    background:url(http://4.bp.blogspot.com/_ABeTMjjfE-s/SS8wiPoK-5I/AAAAAAAAAEM/v9tA8QzdTUE/s1600-h/green+simples.JPG)no-repeat;
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    background-attachment: fixed}


    PLease Help me.

    Thanks

    ReplyDelete
  29. Hey Amanda,

    In most of these tutorials the mentioned code is not available. It says - Service Temporarily Unavailable.Is there any way to get the desired code?

    ReplyDelete
  30. can you email me this as well? Thanks, midwestmommy@gmail.com
    For Sassygirl: I think we're on the same wavelength here... If I'm right, you would need to add a plain background color to the "content-wrapper" in your < b:skin> section as well as the background image for the main body section (I hope this makes sense!).

    If you'd like me to explain the changes in full for you, send me an email and I'll email you the code changes to help you achieve this.

    ReplyDelete
  31. Hey, I figured this all out in under an hour of find your article. Great stuff, also glad to know I can add gif. YAY! If you want to see what I did check out my blog. http://nativeamericanmomma.blogspot.com/
    I love to design, but haven't found time for a HTML class.

    ReplyDelete
  32. Im getting a all white page as well this is what im using


    background: $bgcolor url(http://i250.photobucket.com/albums/gg244/_hextastic/background.jpg) repeat-x
    body {


    margin:0;
    color:$textcolor;
    font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    background-attachment: fixed}

    ReplyDelete
  33. Hi Amanda I am getting the exact same problem as Coelho Dyas. Can you help?

    ReplyDelete
  34. I just wanted to thank you for your help. So far you were able to get me out of a pinch with my header & comments! So it's time to say something. Have a Happy New year. I'm adding you on my site.

    ReplyDelete
  35. This works perfectly in Mozilla, but in Internet Explorer, I get nothing but blank background. There must be extra coding I need for it to show up in IE.

    I can do it if I add height and width dimensions, but then I need to put a padding on the body. If I don't, the body of the blog switches from the middle, to the far left. I don't want to put in certain dimensions, because I want it to be in the middle, no matter what resolution the reader is on.

    What coding do I need to add so it will show in IE, and will also allow me to keep my blog directly centered?

    ReplyDelete
  36. h3x
    i think you just need the sing ; after repeat-x

    hi amanda
    i love your work. i tried almost everything and works but i would like to put a full image not an image on the middle. how can i do that. at work i see a full image in my little screen but at home it is just an image in the middle, can it be adjusted?
    thanks again

    ReplyDelete
  37. where do you paste it?

    ReplyDelete
  38. I'm having the same problem that a lot of other people have had. My background was white to begin with and the photo doesn't appear. Please help. Here's what I'm using for code:
    body {
    background:url(http://picasaweb.google.com/brataloid/BloggerPictures?authkey=33n88FtiPnQ#5283215198835151778) no-repeat;
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    background-attachment: fixed
    }

    ReplyDelete
  39. hey amanda
    I have a question- I added the html to 'How to make make an image repeat across the whole page' but I don't want the sidebar/blog body/posts to be tiled too, how can I make it stay white:)?

    thank you

    ReplyDelete
  40. I'm having the same "white page syndrome"

    Can you help me too????

    ReplyDelete
  41. THANK YOU SO MUCH!! GODBLESS YA!!

    ReplyDelete
  42. can you email me this as well? Thanks, future.pastors.wife(at)gmail.com
    For Sassygirl: I think we're on the same wavelength here... If I'm right, you would need to add a plain background color to the "content-wrapper" in your < b:skin> section as well as the background image for the main body section (I hope this makes sense!).

    If you'd like me to explain the changes in full for you, send me an email and I'll email you the code changes to help you achieve this

    ReplyDelete
  43. Hi,

    Has anyone come up with the answer to the background ending up all white when the tag 'no-repeat' is put in? Amanda?

    ReplyDelete
  44. Okay, I figured it out. For those of you getting the white background when adding the 'no-repeat' tag you need to add this

    background-repeat:no-repeat;

    in a new line right after the line with the image url info.

    I had to start with a large picture that was optimized to reduce file size- then it took up the whole screen. Next I'm gonna try using a smaller image and center it using Amanda's directions and then maybe add color to the sides or a pattern that won't make the page to busy. I'll post my findings!

    ReplyDelete
  45. Here is the rest of my experiment and it was a success! I'm starting to get a little scared- does this mean I'm starting to speak computer? :)

    To get rid of the white background add this right after the image url on new line

    background-repeat:no-repeat;

    When using a smaller image and centering it

    background-position:center center;

    and to change the background color so you can make it look good with the smaller image

    background-color: #000000;

    put whatever color that works for your pic.

    I'm posting this because everything worked for me in Amanda's directions except the above.

    Hope this helps someone-

    ReplyDelete
  46. Hi, Amanda! Thanks so much for your instructions! Could you send me the directions you sent to Patti about how to have one color on the either side of the blog (unmoveable), with the center of the blog another color? I need to know how to add a tileable picture to each of those areas.

    Thank you so much! I'll link back to you!!!

    ReplyDelete
  47. I can't get this to work :( I have no idea what I could be doing wrong, as I'm following the instructions exactly! Could it possibly be an IE thing?

    Here's the code I'm using, in case I've missed something...

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

    Aside from this, thank you so much for your blog! It's helped me out so many times, you do an awesome job!

    ReplyDelete
  48. Hello, could I also have this emailed to me? (vix62(at)hotmail.com). Thanks for the well written instructions! I've managed to add tiles thanks to you but I can't figure out how to get the white middle section.


    For Sassygirl: I think we're on the same wavelength here... If I'm right, you would need to add a plain background color to the "content-wrapper" in your < b:skin> section as well as the background image for the main body section (I hope this makes sense!).

    If you'd like me to explain the changes in full for you, send me an email and I'll email you the code changes to help you achieve this

    ReplyDelete
  49. http://www.bloggingpro.com/archives/2007/09/21/wordpress-plugin-wanted-digg-effect-alternate-image/

    ReplyDelete
  50. Try Use.com They have thousands of templates. It's free, and you can post up to 100 full size images with no size or bandwidth restriction.

    Works pretty good if you want to do things on the fly without knowing any HTML. Best thing is that you can save and reuse templates later on and their templates are both eBay and Craigslist compatible.

    Worked for me and my images are not limited to what eBay or Craigslist offers plus I don't have to pay extra. Let me know what you think.

    ReplyDelete
  51. good for me is

    body {
    background:url(http://z2st3w.bay.livefilestore.com/y1pERXakvDgBM2XZVtBerZ2zg7vMT4amlZXy-bwofnzx9Mu_tHS5tKVc7YCmX5v160GbossHEIhctDYhgOeVtIj5Q/7057%201280-1024.jpg) no-repeat;
    margin:0;
    color:$textcolor;
    font:$bodyfont;
    text-align: center;
    background-attachment: fixed }

    Thanks for your code.

    ReplyDelete
  52. I had a lot of trouble trying to get the image to stay at the sides instead of covering the main blog aswell, to achieve this you need to find the section;

    /* Outer-Wrapper
    ----------------------------------------------- */
    #outer-wrapper {

    width: 660px;
    margin:0 auto;
    padding:10px;
    text-align:$startSide;
    font: $bodyfont;
    }
    When you have found this you simply need to include an extra line with the background colour. for examle;

    /* Outer-Wrapper
    ----------------------------------------------- */
    #outer-wrapper {
    background:#000000; <<---- Extra line.
    width: 660px;
    margin:0 auto;
    padding:10px;
    text-align:$startSide;
    font: $bodyfont;
    }

    You can change the colour by changing the 000000 bit and replacing it with another colour code.

    Hope this helps!

    ReplyDelete
  53. amanda..
    thanks 4 ur tips..
    i somehow got to manage my blog..
    not a pro yet...
    xD
    will improve later..
    =)

    see my new background image...

    ReplyDelete
  54. This has been so unbelievably helpful to me. Thanks so much!

    ReplyDelete
  55. I can see the background image,

    but no one else can :(

    I have tried hosting the pic at 3 different sites....

    what am i missing?

    (i am using your 3 column rounders 2)

    thanks
    -008'

    ReplyDelete
  56. Really comprehensive guide. Thanks for sharing. I have forwarded onto an acquaintance who wanted to know how to adapt her blogger template.

    ReplyDelete
  57. I'm using this and this is effective. My friend told me
    body {
    background:url("http://sacrehalcyon.googlepages.com/bg_image2.png") repeat-y $startSide;
    padding:0;
    width:100%;
    margin:0;
    text-align:center;
    line-height: 1.5em;
    font:x-small Trebuchet MS, Verdana, Arial, Sans-serif;
    color mainTextColor;
    font-size/* */:/**/small;
    font-size: /**/small;
    }

    ReplyDelete
  58. I can't for the life of me get a fixed image wallpaper to show on my blog. I created it in PhotoShop and saved it as a .jpg but no go. What should the dimensions of a full screen wallpaper be?

    ReplyDelete
  59. thanks for the instructions, i wish i can customize my blog by your instructions
    nur_septianto@yahoo.com

    ReplyDelete
  60. Your instructions are wonderful - thank you. I however, have the same problem as Sassygirl, in that I cannot get my main wrapper and sidebar to stay white and can't figure out why not. If I change the wrapper sections, then my sidebar pops down to the bottom of the page and the main section expands to cover the whole screen.

    please help?

    ReplyDelete
  61. Oh, I just figured it out (I hope!). To get the main body white (or any other color) and keep the background picture, i added the following line to Outer Wrapper:

    /* Outer-Wrapper
    ----------------------------------------------- */
    #outer-wrapper {
    background-color:#ffffff; <----new line!

    ReplyDelete
  62. Hi there I followed the instructions to place my own idea, photo as a wallpaper of my blog.

    I tried all the instructions you gave,but there's something wrong cause the image doesn't cover all the page it doesn't matter if I increase the size of the pic. It's strange.

    If somebody could please have a look on the blog: http://lepetitbresilien-portugues.blogspot.com/

    my email:lepetitbresilien@gmail.com

    thanx a lot
    Fabio

    ReplyDelete
  63. ive followed the instructions for the no-repeat one. i can not see the image on my test blog. what am i doing wrong
    body {
    background:$bgcolor;
    background-:url (http://i457.photobucket.com/albums/qq299/Tora_Fe/Code%20Geass/CodeGeass-SchachZero.jpg)no-repeat;
    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;
    background-attachment:fixed
    }

    ReplyDelete
  64. Hi, thanks for all the great info! I am also having probs getting the white middle. Can you please email me and tell me how to do it? Thanks!
    topaz_girl23@yahoo.com

    ReplyDelete
  65. Hey,
    I made my own image using Microsoft Paint, and uploaded it to HotlinkFiles.com, and tried copy/pasting the url to the HTML settings on my blog, as you described. I then got an error message saying, "Invalid variable declaration in page skin: Variable is used but not defined. Input: textcolor". Could you e-mail me with better directions? Also, I am trying to do the repeating image way.

    ryguy740@yahoo.com

    ReplyDelete
  66. I have a question. I use a background but it makes it hard to see my writing. How can I fix this?

    ReplyDelete
  67. I am getting the background image but it is covering the whole of the page and I want the middle (where posts etc will go) to be plain otherwise you can't see any of the text.

    Great tutorials Amanda, thank you. If I can get the plain centre on the page I will be over the moon!

    Can you post the fix maybe because it seems several of us have the same problem.

    Many thanks

    ReplyDelete
  68. such a HUGE help! you're awesome!!!!!!! thank you!

    ReplyDelete
  69. thanks............


    visit...

    www.desicracks.blogspot.com

    ReplyDelete
  70. Hi, I'm new to blogging and this blog and I wish more of the answers to these questions were posted in the comments!

    I've tried several ways to change the background in my blog (stretch denim,modified to 3 columns), but the existing background colors seem to over-ride the background I try to use.Right now,I have a background from Cutest Blog on the block, and you can only see the edges of it.I like that look, it's like a patterned border. But I want to add a subtle pattern behind my posts, and leave the two sidebars plain brown.

    I took a BASIC class 20 years ago and am learning HTML as I go along. Before I found this site I would spend hours trying to make simple changes to my blog so I am thrilled to be here!

    ReplyDelete
  71. Good and informative tutorial. Keep blogging. Thanks.

    ReplyDelete
  72. i have problems making the image tiles up the whole page with the code you suggested but eventually managed to get it accidentally, so thought of just sharing :) this is my code:

    body {
    background: url(http://imageurl) repeat;
    margin: 0;
    padding: 0px;
    font: x-small Verdana, Arial;
    text-align: center;
    color: $textColor;
    font-size/* */:/**/small;
    font-size: /**/small;
    }

    ya, just put "repeat" without "x" or "y".

    ReplyDelete
  73. Thanks for making this so simple. I knew I wanted to use my own image but I didn't know how. I feel like a blog rock star! You have a great site here. I'm sure that I will be back.
    :-)

    Traci
    coldcomfort@yahoo.com

    ReplyDelete
  74. Thanks! This is exactly the information I needed! Excellent tutorial.

    ReplyDelete
  75. Hi there

    Thanks for your help and advice -
    i've created a blog background which works fine- but i was wondering if there was any way that I am able to set my background so that when the size of the window is decreased the wallpaper stays connected to the main text column instead of the text column moving over the background. the design I made works best if its in a set position around the blog column

    http://indieberries.blogspot.com/

    any help would be VERY appreciated!
    thank you
    che*

    ReplyDelete
  76. Very good tutorial.....
    Thnx! :)

    ReplyDelete
  77. Hello:

    I'm reading through all these comments and see no direction on how to place the code for the b:skin section of the code.

    right now, I have placed an image.. that is working.
    It covers the entire background; center posting around; sidebar... and I like most on this list want those items to have a white area behind them so I can read the copy.

    I've included: background:#ffffff after the #outer-wrapper {
    line but you mentioned something about also putting this information near the b:skin section.
    I'm not sure how to do this.

    when I put in the background:#ffffff after just the #outer-wrapper { line it actually shifts all my colums (sidebar goes to outer right side/center posting around goes to far left side... so I'm thinking I'm missing something

    please help!

    earphoria@comcast.net

    ReplyDelete
  78. Thankyou!

    Your explanations were clear, and I was able to figure it out easily thanks to you!

    From Kayla and her new happy blog. :)

    ReplyDelete
  79. Thanks for sharing this information.

    ReplyDelete
  80. thanx
    i use this code for my blog.

    ReplyDelete
  81. where i have to type the background code?! im really confused!! D:

    ReplyDelete
  82. I am thoroughly convinced in this said post. I am currently searching for ways in which I could enhance my knowledge in this said topic you have posted here. It does help me a lot knowing that you have shared this information here freely. I love the way the people here interact and shared their opinions too. I would love to track your future posts pertaining to the said topic we are able to read.

    ReplyDelete
  83. Thanks for taking the time to discuss this, I feel strongly about information and love learning more on this. If possible, as you gain expertise, It is extremely helpful for me. would you mind updating your blog with more information

    ReplyDelete
  84. 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

    ReplyDelete
  85. hi,,i'm new to blogging..

    as i saw many comments, i still don't get the answer for "what is the best size for background image so it doesn't get pixalized?" or is it automatically resizes by the server?

    I thank you for anyone who answer my question..

    ReplyDelete
  86. How can I set a background image to automatically resize regardless of screen resolution so it fits the entire page?
    Blogger-wise I mean.
    I tried using the following CSS commands but didn't succeed cause I am a newbiew with advanced customization:
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;

    Can you help please?

    ReplyDelete
  87. nice blog: i i spend almmost 5 hours now...then i succeed to set my custom background image.,...my blog is http://earnupakistan.blogspot.com....visit my blog and place ur comment..if possible..

    ReplyDelete
  88. M/S SHAFI & SONS ENTERPRISES take this opportunity to introduce one of the renowned leading Overseas Employment Promoter in Pakistan. . The continued progress of us reflects the economic vitality of the Pakistan established under License Ministry of Manpower Services & Labour. We are a financially strong and rapidly growing company that has helped to lead the expansion of employment of Pakistani people.

    ReplyDelete
  89. nice article
    visit:
    http://internetricks4u.blogspot.com/

    ReplyDelete
  90. I certainly agree with you. Your advice is really very helpful for us.Thanks a lot!

    ReplyDelete
  91. Thanks to share with us the information. I wish you good luck!

    ReplyDelete
  92. THank you for such a helpful Information....
    How to blog

    ReplyDelete
    Replies
    1. I can't imagine what i would have been able to do without been with my lover. I was fed up of life when i received his mail that cool evening that he does not want to have anything to do with me again that i should move on with my life without him. As for me i felt like the whole world was crashing on me but I thank God for making use of Dr.Zabaza to get my lover back within 48hours. If you want to get your lover back contact Dr.Zabaza on worldwidesupremetemple@gmail.com or call him on +2348065147905. is the perfect solution for that your relationship problem

      Delete
  93. THank you very much

    <a href="http://www.hackbymak.blgspot.com>
    GEt FREE GPRS TRICKS @ Hack By Mak </a>

    ReplyDelete
  94. my website, left side navigation can not repeated, how to fix this problem,

    here is the code:

    #left{
    width:22%;
    height:1024px;
    position:absolute;
    float:left;
    background-color:#f6f6f6;
    background-repeat:repeat;
    border-right-width: thin;
    border-right-style: solid;
    border-right-color: #e0e0e0;
    z-index:1;
    }

    SwamyG

    ReplyDelete
  95. Thats nice tutorial...i used the code to use image horizontally

    ReplyDelete
  96. The good news is you don't have to water the veggies with all the rain and for a few days afterwards too. I do hope you are able to store some of it at least for when drier times arrive.

    ReplyDelete
  97. Very helpful, thank you.
    It didn't exactly fix the problem I was having with not being able to use the template editor to add a background in, but I am able to manually fix the problem thanks to you, so I very much appreciate it.
    :)

    ReplyDelete
  98. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.

    Photo editing

    ReplyDelete
  99. Thank you for give to informing

    ReplyDelete
  100. I love your blog! Here I find a lot of helpful information I need. Thank you for your work.
    _____________________________________
    medical billing companies in Georgia
    Medical professionals' leading billing software

    ReplyDelete
  101. thanks alot for this, i just added the background image to my blog.

    ReplyDelete
  102. I can't stand sleeping in complete silence, so I always have a fan on. Also, I'lll admit that I use my ipod for most of my work day since
    http://www.arabie3lan.com الشيخ الروحاني
    I spend a lot of it working through paperwork. I also often use it for my walks, though, from time to time, I'll go without it and just listen to the sounds around me and take in the nice weather.

    ReplyDelete
  103. www.herzas.net - Domain Parking
    الشيخ الروحاني http://www.sheikhrohani.de/

    ReplyDelete
  104. Have been following you for years, and am now on my second blog!

    I am using one of Blogger's backgrounds, but I want to lessen the intensity of the color, fade it a bit.

    Is there a way to do this? Thanks!

    ReplyDelete
  105. Fabulous article writing. Your article delivers varied passion therefore I bookmarked this science system for future visit that i hope can get a current content from your post and every one content unit progressing to be pleasant to scan with some new things.
    web development dubai
    dubai web design

    ReplyDelete
  106. I’m impressed. Very informative and trustworthy blog does exactly what it sets out to do. I’ll bookmark your weblog for future use.

    ReplyDelete

Great! You've decided to leave a comment! Please bear in mind that comments are often moderated and that rel="nofollow" is in use and spammy comments will be deleted. Let's have a meaningful conversation instead. Thanks for stopping by!

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy