How to Add a Background Image to Blogger

by
Since the new template designer came out some years back, adding a background image to Blogger is no longer a template customization anymore. You can now add a background that either scrolls with your blog posts or remains fixed in the background (my preferred setting).

The key consideration is that your image should be large to fit to most screen sizes on monitors especially if you want it to cover the full width of many different types of displays. It is not enough anymore to focus on 1024 by 768 screens when large HD monitors can now have resolutions much higher such as 1920 by 1080.

The steps are very easy and I'll lead you through it.

Using the Blogger Template Designer


First step is to get yourself into the Blogger template design by selecting the Template menu from the Blogger main menu and then selecting the Customize button as shown in the diagram below:

Once you've selected the customize button you should see the Blogger Template Designer menu:


Select the Background menu item on the left that I circled above. This will take you to the default background image positioning dialog for your blog. To actually add an image, click on the little down arrow just to the right of the blank white image:

Blogger Background Image

At this point the background image dialog appears and you now have the option of adding some pre-built backgrounds offered by Blogger, or, you can upload your own image from your personal set of photos, graphics or illustrations.


Uploading Your Own Blogger Background Image


To select your own image choose the Upload image menu option shown here:

The upload browse selection will appear - choose to Browse... you own file system :

For this example I found a cityscape photo in my Pictures directory of my laptop. Once selected and uploaded, Blogger shows you a snapshot of the background image like this:

Your own image is now ready to be used as your Blogger blog's background. If you don't like your first choice, just go back and pick another image. Be sure to click on the orange Done button once you find your best image.

Setting the Background Properties


At this point you'll be back in the Blogger Template Designer background image menu. Here is where you can set the properties of your image. The key settings to note are the Alignment which allows you to set the image to the left, right, top, bottom, etc and if the image will be tiled (meaning, the image will be repeated left-right, top-bottom if the screen is very large:


My preferred settings are to align the image in the center, tile it for very large screen and to turn off the  Scroll with page so that the background stays fixed while the user scrolls through your blog posts like so:


There you have it - a background image for your blog! Don't forget to hit the Apply to Blog button in the upper right of the screen before you leave the page with the << Back to Blogger selection:


Remember, with your background image you should try to find as large a picture as possible that will fill a 1920 by 1080 screen. If not, something that looks good as a repeatable pattern works too. Also, if you don't tile your image, then on very large screens the picture will have white borders which looks a bit odd (especially on a something like a large Mac screen).

Note - there does seem to be an issue with Blogger for some larger images not showing up in the background. Just be aware to choose another image or scale your image down if necessary.

Here's a simple example I've done using one of my test blogs - http://seo-tags-goodness.blogspot.com/
66 comments:
  1. Very useful tips for new blogger like me :)

    ReplyDelete
    Replies
    1. I covered those steps and wanting to change the image I could not! It was stuck on an image and can not change! In addition, as only compile photo 300 ko??

      Delete
    2. If your image is stuck it may be your template. Did you download a free template outside of Blogger? Otherwise, the Blogger templates should do the trick.

      - Don

      Delete
  2. What about adding externally-hosted images, since Google limits file size?

    ReplyDelete
    Replies
    1. Excellent question, Levon. I'll take a peek at that!

      Delete
    2. Hey Levon!

      Here's what you need to do in order to use an external image. First, be sure to upload a simple background image and location settings first using the tutorial above - this adds a line in your template so you can add your own custom URL.

      Now, just open your template directly using the Edit HTML button and find this line in the header:

      <Variable name="body.background" description="Body Background" type="background"
      color="$(body.background.color)"
      default="$(color) none repeat scroll top left" value="$(color) url(your external URL here) repeat fixed top left"/>


      Add the full external image URL to the section where I put 'your external URL here' and save the template. That worked for me! Be sure not to use copyrighted material.

      Hope that helps!

      - Don James

      Delete
    3. I am getting this error message when inputing that code:
      Invalid variable declaration in page skin: Variable name must not be declared twice. Input: body.background

      Delete
    4. Hi Michelle,

      I'm assuming you're talking about Levon's question about adding an external link, right? If so, you're searching for the line I noted for Levon <Variable name = ...etc in your template. Don't copy and paste everything I listed above - that is the reason for the error you see.

      The only thing you want to alter in your template is the part that says 'your external URL here' - so that it points to the external link and looks something like this example:

      ...url(http://www.somecoolimages.com/image123.jpg) repeat fixed top left....

      You're only altering the text within the url( ) parentheses.

      Remember, you have to add a background image first using my article tutorial before you can alter that line.

      Does that help?

      Delete
    5. Hey Don,

      I wanted to try that out myself. But I didn't know where to upload my image. So I put it on my skydrive/onedrive account and shared it with this get a link option (http://windows.microsoft.com/en-us/onedrive/share-file-folder), and "Public", and I used the shortened link.. but it didn't work. My background is now default white..
      What could I've done wrong? Or is my image maybe too big for it 632 KB ?

      5ucAyman

      Delete
    6. Hey 5ucAyman,

      Your method should work just fine - try adjusting the image size again. I can't tell you if skydrive will work though. Why not just upload it into Blogger (I show you above in the tutorial)?

      - Don

      Delete
  3. Hi Don,

    I was wondering whether you could help me? I want to have a customized background to the Blog Title page. Any idea whether this is possible and how to do this?

    Additionally I am trying to figure out the size of my current blog title - area? I would like to make to shorten it but I also have difficulty with that?

    Would be great if you have some advise.

    Thanks

    ReplyDelete
    Replies
    1. Hi!

      I'm not sure exactly what you're asking. When you say the Blog Title page do you mean the top Header on your page underneath the Blog title? Or, do you mean the background image to entire blog page? For your second question - I took a look at your blog and measured 1138x209 pixels for the black header area. Your title font is set to 140% - if you go to the Customize button on your template you should be able to resize the title.

      Let me know more about your first question. Thanks.

      Delete
  4. Hi Don,

    Thanks heaps for your help. How did you measure the pixels? sorry I am a real have-no-idea person if it comes to blogs.

    So what I am trying to do is design my own background for the top Header (where it says Pirates & Popsicles). At the moment it is black but I want to customize the background so it is not that boring. I got to figure out how i can customize the background (which is a picture now) but for the Header I can only change the color not add in a picture or other graphic.

    For the total Blog I figured out the size is 1800 x 1600 and now with your measurements I also know within which measurements I need to design my graphic for the Header. Just left with how to insert it?

    Thanks heap for your help again.

    Anne

    ReplyDelete
    Replies
    1. Hi Anne,

      I just used a simple paint program to capture the screen shot and measured the size. I have a tutorial on how to add the banner image to your title in my post called Build a Basic Wordpress Theme for Blogger - Part 2. ( http://www.bloggertipspro.com/2012/06/build-basic-wordpress-theme-for-blogger.html ).

      I have an external link to a tutorial on how to create header images (it's pretty detailed) in that post as well. But, if you use my post instructions to upload an image of 1138x209 you should see it behind your title.

      I hope that helps. If you need a simple, free online tool to scale images or crop them to your size, see my other post on using Lunapic.com in Add a Background to a Blogger Post ( http://www.bloggertipspro.com/2012/09/add-background-to-blogger-post.html )

      Good luck - and feel free to ask more if you need help!

      - Don James

      Delete
  5. I'm following the steps but no changes are going through to the blog. I first tried uploading one of my own pictures as the background but when that didn't work I decided to test with one of the Blogger images. Still nothing. Any advice? Thanks!

    ReplyDelete
    Replies
    1. Hi!

      Be sure to check the size of your image - make sure it isn't too large. I found that some of my larger digital camera pictures would not upload correctly and had to scale them down. Also, be sure you're pressing the 'Apply to Blog' button once you've picked your image or it won't work.

      Hope that helps.

      - Don James

      Delete
    2. I've the same problem. Neither a default picture, nor a self upload (less then 300 kB) works, although the correct URL is in the template HTML under <Variable name="body.background"... I use the Travel template by Sookhee Lee.

      I'm at a loss.

      Delete
    3. This seems to be an ongoing bug or issue with Blogger - if you continue to see the problem be sure to contact Google support at:

      http://productforums.google.com/forum/#!searchin/blogger/blogger$20background$20image

      Plus, you might try a different browser - I use Firefox so try that if you don't

      - Don

      Delete
    4. I finally managed it. There was one place in the Template HTML I had to change the old Backround-URL manually, after the declaration of the variables, when the body begins:

      /* Content
      ----------------------------------------------- */
      body, .body-fauxcolumn-outer {
      font: ...;
      color: #666666;
      background: #f4bc4f url(//backround.jpg)... <--- here!

      Delete
    5. Glad it worked out for you!!!

      Delete
  6. I wish there were also new templates for blogger.. Anyhow, do you have any tips for optimizing images?

    ReplyDelete
    Replies
    1. Hi Dianne,

      The key to optimizing your images is to reduce their size to under 1500x1200 pixels and to save them as JPEG files to compress them. If you go to my 'Resources' menu above you'll see a link to the online tool, Lunapic. You can use that to do the reduction and jpg conversion.

      - Don James

      Delete
  7. Hi Mr.James,
    im unable to use this method for the templates which i downloaded.
    itz only available for the simple templates given by blogger .. could u help me out plz . thanx !!

    ReplyDelete
    Replies
    1. Hi Vamsi,

      This is a tough problem for downloaded templates. I've discovered that many of the custom template creators do not follow the Google Blogger template standards so that many of the features in the Blogger editor do not work correctly.

      However, you should be able to add the CSS header for your background image. To do this find the CSS body { section at the top of your template and add the CSS background: command. Here is a reference:
      http://www.w3schools.com/cssref/css3_pr_background.asp

      You'll have to upload an image into a post or a page in order to have your background image URL for the command and for it to be visible in Blogger. See my post on Adding a Background Image to a Post for instructions on how to add images to Blogger that you can use for backgrounds or image sliders. Be sure to reference the full URL in the background: CSS command.

      Hope that helps.

      - Don James

      Delete
  8. Hey Don, Im studying IT in college and am pretty clued up with the basics of html and css, im just a bit stuck. Is it possible to add a picture from my computer as the background through html, as said above but instead of typing the url, using the file name or location? I tried adding a picture through customization but does not work correctly. Please help, thanks.

    ReplyDelete
    Replies
    1. Hi Char_Beyy,

      I'm not quite sure what you're asking here. Since Blogger is hosted at Google you would not be able to see a locally referenced path except on your own computer - no one else would be able to see it. Is that what you're asking? If so you have to reference the file as: file:///C:/MyFolders/images/background.jpg.

      If that's not what you mean - be sure your file size isn't too large.

      Delete
  9. Ah yes I see the problem now. Yes it is what I mean. I will just have to try and compress my image down so the file size is not to big, so it fits in the customization way. It was just because I had created my own background I wanted to use but the file size is too big. Any tips on how to reduce the file size without distorting the image?

    Thanks

    ReplyDelete
    Replies
    1. Hi Char,

      Sorry I missed your question - use JPG compression to reduce the file size. You can use the free online image editor, LunaPic, to do that. Just find it in my Resources tab above, upload your photo and then save it as JPG with 60 to 80% color quality.

      Delete
  10. how do you stretch the picture to the full screen size?
    cuz am not really feeling the tile idea

    ReplyDelete
    Replies
    1. Hi Ace,

      For Blogger you must upload an image large enough to fill the screen. However, this is virtually impossible as screens get larger and larger. The best bet is to upload an image with a pixel width of about 1500 to cover most screen sizes. Then, tile it so that a very large screen such as a 27 inch iMac will not have white borders.

      If you are adept at CSS you could modify the template to stretch the image to the screen size - but, the image degrades on very large screens.

      Be sure to convert your background image to a JPG file with compression first so that the file size is not too large. Blogger won't allow very large images.

      - Don

      Delete
  11. Fantastic worked a treat

    ReplyDelete
  12. Need Help,
    I uploaded a background image then applied to the blog, my image is not showing up. I went to check HTML and the image is there but not showing up on my blog... please help


    ReplyDelete
    Replies
    1. Hi BMBL,

      Please take a look at your image size - be sure to reduce it by converting it to a JPG file with compression and to reduce the height and width. That should fix your problem.

      - Don

      Delete
  13. Hi,
    I have an image that is 1800x1600 like suggested and I can't seem to upload it as a FULL IMAGE. It will tile, but not fill the screen. I am trying to keep it under 300k but am having difficulty. I am adjusting in photoshop. Could you give me exact measurements that I could try?

    I am nervous (as I'm inexperienced) to edit my HMTL programing.

    I would really appreciate your help if you can.

    ~Kori

    ReplyDelete
    Replies
    1. Hi Kori!

      I'm sorry but I'm also not sure just what the limits are. When I did the example noted at the end of this post, I had similar issues as you. All I did was continue to reduce the size slightly and increase the JPEG compression. The image I used for my sample was 1568x1176 and a size of 130K.

      You should have to worry about the HTML since the upload of the background is controlled by the Blogger Template Designer which hides the HTML complexity.

      Let me know if that helps!!

      - Don

      Delete
    2. Kori, I meant in that last paragraph - "You shouldn't have to worry"

      Delete
  14. Kori, I'm having the exact same problem. I began with a 1800 x 1600 image, and ultimately tried with a 300 x 300 image and always got the same result: it doesn't fill the screen even though I apply the appropriate settings. It's very frustrating.

    ReplyDelete
    Replies
    1. The problem may stem from systems with very large displays. As large screens such as on iMacs or other systems get more popular it is difficult to fill the screen completely.

      You'll have to tile the image as some point - hopefully keeping the resolution high and file size low.

      Delete
  15. Thank you Don,

    I still seem to have trouble.
    What are your measurements for pixels/inch?

    The thing that is confusing, is that it has no problem using THEIR photo (ie I am using the sailboats one now) as a full background...so I know it can work with my computer/system...just not sure how.

    If it helps,
    this is my pasted html as is:








    not sure if this is the right section....
    if it is, I can kind of see where you suggested in your top post.
    However, I am also unsure of how to get a URL from my image to plug in...

    I'd like to try the sizing first if I can.

    Thanks again Don

    ReplyDelete
  16. amazing..elegant....i like your screenshot tips

    ReplyDelete
  17. Hello....
    very nice blog for the different images for the wallpaper for the good for the tips for the free advice for the different format for the images and then for the how to upload for the good for this post.....

    ReplyDelete
  18. Hi there! I'm having an issue with my background image, it says it's been loaded and is showing and everything, but it's not appearing. I'm guessing the original white background is still "on"? So I tried to make it transparent but it won't let me select transparent, help! :(

    ReplyDelete
    Replies
    1. Hi Sarah,

      Please take a look at the comments above about your very same problem. This seems to be due to the size of your image. Please try reducing the image and saving it as a JPG format to reduce the size as well.

      Let me know if you need more help!

      - Don

      Delete
  19. Any image only seems to effect the title instead of the whole page ,,what am I doing wrong

    ReplyDelete
    Replies
    1. Hi Pioneer (or, Mad Woman :)

      What might be happening is that your Blogger template might be masking out the background image. Can you post your Blogger link so I can look at it?

      - Don

      Delete
  20. thank you dude,It's working fine

    ReplyDelete
  21. I have added a background image on the blog i am using,The link to this image is this http://idg.bg/test/pcw/2013/6/29/21267-watch_dogs_game-HD.jpg,but the thing is on the blog which i am trying it's not showing the image fully have a look at the blog i am saying this is the blog link http://getwatchdogsfullpcgame.blogspot.com/ how do i fix the image to fit properly?

    ReplyDelete
    Replies
    1. Hi Nevil,

      Your image is too large for Blogger to display - over 1MB won't work. Take a look at the comments above with people having the same issue and what I suggested to them. Mainly, try to use JPEG compression and reduce the size of your image.

      Hope that helps!

      - Don

      Delete
    2. Hi Nevil,

      I scaled down your image to 135K - take a look at my test blog:

      http://seo-tags-goodness.blogspot.com/

      This seemed to work. Can you see it too?

      - Don

      Delete
  22. Hi,

    What is the perfect number of pixels that I should use for my background picture to cover everything up without having weird tiles?

    Please help!!

    ReplyDelete
    Replies
    1. I wish I had an answer for you. Check the earlier posts for others with the same problem. This is something Blogger needs to clearly spell out.

      - Don

      Delete
  23. hi please after i centered the header and the description of my blogspot the customed background for my mobile theme disappeared please how do i fix it

    ReplyDelete
    Replies
    1. Hi James,

      I don't understand your question. What actually disappeared?

      - Don

      Delete
  24. Hi Don, I wonder if you can help me? I've been trying to upload my background image to tile and scroll with my screen - it all seems to be working except right at the top left of my screen - where it has one image overlapping another - like its been randomly plonked there! Perhaps you could take a look for me at http://www/mrsbishopsbakesandbanter.co.uk - I just can't seem to work out what's wrong! Its driving me nuts!
    Many thanks
    Lucy

    ReplyDelete
    Replies
    1. Hi Lucy,

      I took a look and it seems that you have the background image duplicated in your Template at this point in the CSS:

      .body-fauxcolumn-outer .cap-top

      In that part of the template there is a background command that has your image. Go in and edit your template - you should set this to:

      background: transparent none repeat-x scroll top left;

      The background command in the main body section is correct with a tiled image. My change should remove the extra image. Be sure to back up your template before messing with it!! :)

      Let me know if that works.

      - Don

      Delete
    2. Thanks Don, that's fab - I didn't have a clue how to do it, but my husband just took a peek and has sorted it - thanks so much for the instructions, it seems to be working fine now.
      Kind regards
      Lucy x

      Delete
  25. This comment has been removed by a blog administrator.

    ReplyDelete
  26. Also, once the blog has fully loaded the frame for the blog goes a darker opaque grey and you can't see the photo at all!! The twitter feed also disappears at this point!! :-(

    ReplyDelete
    Replies
    1. Hi Hannah,

      Can you explain a bit more of what is happening? I don't quite understand the problem you're having.

      Thanks!

      - Don

      Delete
    2. Hannah,

      I didn't see your last comment until now and accidentally deleted it!! Oooops!! Please send me the link to your blog again. Thanks and sorry!

      - Don

      Delete
  27. Hi Don! It seems that I read your post too late, and tried to find a source outside blogger that would help me with a background. The new problem that I have is that a background image that I added as a widget (HTML/java) and later removed is stuck on my blog. I reverted to a blogger template and the background image is still there! Any tips on how to fix it? Thanks!

    ReplyDelete
    Replies
    1. Hi Wendelyn,

      Sounds like your background image link got embedded into the template code. If you go into the template HTML and copy it - then email it to me at don [at] bloggertipspro.com I can take a look to find where the link is.

      - Don

      Delete
  28. Hi Don, Thank you so much for these simple and very easy to follow instructions! I successfully changed my blog's background :)

    ReplyDelete