How To Use A Background Image For Your Blog




| 21 comments

In this post i will show you how to have an image as the background of your blog.Adding the image is easy and can be completed in a few steps.

This is part 1 of 3 on adding background images to your blog recently i posted:

1.How To Add A Background Image To Your Blogger Sidebars

2.How To Add A Background Image Behind Your Blogger Posts

First you must find the image you want as your background you can find images on image hosting sites like Photobucket of do a Google image search.

You can find/create an image big enough to cover the entire background of your blog.

Most people will just find a small image that will repeat across the background i have set the code to accommodate both.

How To Use A Background Image For Your Blog

Once you have your image here's how to add it :

1.Click 'Layout' -->'Edit Html' for your blog

2.Find the following piece of code in your blogs html:
(Click 'ctrl F' for a search box to find the code)


body {


You will see 'body {' followed by code similar to this:


body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: $textColor;
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;
}


3.Add the following piece of code Directly Below body {


background:url(PUT IMAGE URL HERE) repeat top right;
/* background-attachment: fixed; */


4.Replace the text 'PUT IMAGE URL HERE' above with the URL of your image


We Are Nearly Finished - : If you need more help or have an opinion or suggestion Please leave a comment Below.This is a Do-Follow Blog.

Example:


body {
background:url(http://i941.photobucket.com/albums/ad259/spiceupyourblog/bloggerbackground.jpg) repeat top right;
/* background-attachment: fixed; */
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: $textColor;
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;
}


5.Click Save and you have your background image added.

Have you added a background image to your blog ?


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

21 comments:

  1. This sounds easy enough but to an absolute beginner it is not easy. My picture that I have made is in a folder on my computer in my pictures. It is a jpeg picture. There is no url no http, no code to copy. So how in the world am I supposed to insert the url of my layout/background that I made to get it onto my blog? Hope you can help! Totally Lost In My Own Blog~

    ReplyDelete
  2. Hi,

    Are you able to upload the image to blogger?

    If you can upload your image to blogger you can get a the image URL.

    Check this video out, its about starting your blog but also shows how to upload an image :

    http://www.youtube.com/watch?v=BnploFsS_tY

    Once you have the image uploaded comment back and i will show you how to add it.

    Dont worry if you cant do it this way we will get it some way just let me know...

    Paul.

    ReplyDelete
  3. Hi Paul.

    I have a teensy problem. I did exactly as explained but there are no change to my background at all..please help!

    Thx Sonja

    ReplyDelete
  4. Hi Jovibabe,

    I took a look at your Blog and i think the problem is you have 'Background' defined twice.

    You added the code i gave you above thats fine.
    But your template also has this code :

    background:#ccc;

    Remove that piece of code(Its under the code you added for the background image so follow the steps above again) once removed save that should do it.

    Let me know..

    Paul.

    ReplyDelete
  5. My image didn't take either and when I removed what I think is the code you told me to remove, it took ALL the background color away. Now mine is white as my knuckles are trying to figure this stuff out. It certainly isn't exactly how you describe in every case and increasingly frustrating. But I knew this going in. Downloaded a template to go in place of the drab one from blogger and hell I can't even figure out how to unzip the file OR even IF it's zipped. I'm on a mac. This is all a bit more than I bargained for and now my background is white. Pray for me.

    ReplyDelete
  6. If you downloaded a template with allmost all sites it will be zipped and any templates i have on this blog are zipped.

    If you cant get around this try www.ourblogtemplates.com i dont think you need to unzip their templates just download then upload.

    Paul.

    ReplyDelete
  7. Let me try that temp site. I've got nothing to lose at this point. Keep you posted. You do so much for everyone it's tough to whine, I just have no patience for this sort of thing. Im a photographer for a reason! LOL Least I can still laugh-

    ReplyDelete
  8. Paul any chance you could look at what's left of my blog ? I absolutely HATE these blog temps that force everything into the middle of the page. I want my content all the way across the page. I like the darker color themes to offset my images and text. Believe me if you DO look at my blog, the template thats there now is definitely not the one I screwed up trying to change the background.

    ReplyDelete
  9. Whats your Email Michael ? i will delete the comment once i get it..

    ReplyDelete
  10. Use newsandsports@gmail.com

    I'm going to head to bed it's been a long day, but will check soonest in the am. I managed to get the blog up there at least for now with one of the blogger templates that I don't like. I like the ones you have but I can't figure out how to unzip it on a mac. I may try the pc in the morning.

    ReplyDelete
  11. OK, managed on the PC to get a template to load, NOW I don't like the way it works and it's limited functionality. But now there isn't anything to click on to change the html or wherever I would go to change it back!

    ReplyDelete
  12. You can just download another template and try that its trial and error trying to find the right one.

    Paul.

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

    ReplyDelete
  14. Hey paul i have a Q.. Go here http://www.problogdesign.com/about/ can we put like that colour to a blog ? if yes, please can u tell me ! thankx alot !!!!!1 :)

    ReplyDelete
  15. Hi Karthik,

    You can do absolutely anything with the blogger set up.

    The problem is it's hard work - Im familiar with Problogdesign and he uses a highly custom Wordpress template.

    Could the template be converted to Blogger ? Yes

    Would it be easy ? No

    The template he is using is made up of images not colors - right click on any part of the temlate and click 'View background image' you will see the images being used.

    If your not happy with your template you can look at some of the options i have here - click 'blogger templates' in the labels on the sidebar or head to themecraft.net - Cloud is making some awesome free templates there.

    Or you could ask Michael on problogdesign to re-create the template for you, he will want a few hundred buck for the trouble :D

    Im not trying to put you off - keep asking questions it's the only way to make progress !

    Paul.

    ReplyDelete
  16. Oh No ! You are really a great guys who have got a mind of helping others. I like my template, but I need to modify it. Like i need to put some good background pictures. But the problem is that i dont find the #sidebar-wrapper { or body {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    text-align: center;
    color: $textColor;
    font-family: arial,verdana,helvetica,tahoma,Sans-serif;
    font-size: 100%;
    width: 100%;
    } Why is that ? Thank you for your help !

    ReplyDelete
  17. sir, whenever I visit your blog I'm really amazed to find such nice tips and tricks in just one place... thanks a lot for that.

    ReplyDelete
  18. Hi Suraj,

    Thanks for your great comment, i put a lot of hard work into spice and people taking the time to leave a nice comment not only makes my day it makes it easier to keep working hard and helping.

    Paul.

    ReplyDelete
  19. I've been trying out this background thing for three day straight and it didn't work.... all I got was white/blank, blank, blank.....
    I created a link in flickr

    http://farm5.static.flickr.com/4009/4346642345_36d5560eff_o.jpg

    and wanted to repeat it vertically, so it won't take long to load

    I even try to change the template, messed up the whole blog and lost few widgets (and still favoring the layout I have now). Is there some sort of lock system when you're using a downloaded template or anything like that? ?

    I am lost.... help

    ReplyDelete
  20. is it possible to have a slideshow background? so instead of ust one fixed mage, have a slideshow?

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us