Add or Change Background Image of a Blogger Template


How to Change the Color of a Blogger Background (Default Templates)
If you are using a default Blogger template then you already have the option to change the background color to your own taste by going toLayout > Fonts and Colors. Some third party custom Blogger templates have this option too but by no means all. For instructions on changing the background color of custom templates see tips and troubleshooting below.

How to Add a Background Image to a Blogger Template

  1. Log in to Blogger if not already logged in
  2. Go to Layout > Edit HTML
  3. Back up your Blogger template as a precaution by downloading the full template to your computer
  4. Find the following line in your Blogger template

    body {
  5. Add the following line directly after this line
    background-image: url(URL address of your image);

    Your block of code will now look like this:

    body {
    background-image: url(URL address of your image);
    (existing code in this block)
    }
  6. Now replace the code in red for the URL address of your image. Choose an image from the selection below to practise with or use your own image. Note if using your own image make sure you read the tips and troubleshooting section below.


    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJUm3JjGq37DAmqg5h0ejBSVPFKrOuicgRMtlRyrqqitDvUPahSMhyot1NmpO3Utt-dRAqU6QHUqFj5LguWS6Vqlc1JtLzNlkMzZZMl_FdWHQrAa5w7LADeLkkgYzcEzMV9gLQ1MtbybA/s320/background_047.gif


    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDVhDd1IOfpNKe9VyxvIlyidwz3QTugA49B7yriKzPKq5yEjfm4RG4Ga4eXMUJP9bfeZ9I0tgQgOafMXZPWyh0ZWI32ghNG9YtxyMZI3ou6eSrjrkbJmcUe_0-ORU42Ti_CTMqhO0gQTg/s320/background_104.gif


    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNO__e8fGpq3eP1HUnRDPj5lepqePJJVD0w6-3jVK1Oa1e0Ezsbu8Zs2B_GzWAyrIfA8rEsuHRGbrAdtPbspLig8LhvpcgPCrtjvx5pTk9cLywX1cHtnQMAs2eMiwqdKd38GK_zYge8xQ/s320/background_126.gif


    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTpX1KC2KZWgJL5xcmOCjy6d-fw3ooST2GyI67w4XvKCiIzry8nVrMKitW8iCyMngr0-ZHDabHYWfiANfzzpG2CW7bWn6n3z3QIyPMT6VAc_eoGyUjuBkVRCdgI8ux4FyhlFTgV-pQq8Y/s320/background_073.gif


    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6GPkGKhZkMPovrRE5k9rghJ_IVEOCydHBNu5HS19gNBQLCG4ncQkV-z17mffnwq3hZvJ6_BUVW05431EZlpgOAYY9vqVBOJjEnc1vCpcHJwTMY8HrhtH-_5tJIqmyc1Cjby-3Hw7WDuQ/s320/background_083.gif

    Green Paws Background

    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiAS2007n_hEMJpjr3BXFEShimnntu9QqwGWjGUxprqPRZptsnysjgWhb6p0bfdEoS_kyV7Xoq81aZhKApF9B6C5GnhfdDDQcsWB9aM5ywxMj0E1PWkrGNE69j5k0ImtaE-crzqU7YP1A/s320/green-paws.gif

    Musical Notes Background

    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4LGHhUR6BTKHHhxEF963E_qOHXyUC2UCj6lpyXe47YdtDooX7GyOD7hEV26kac71sQIoaA0UeHpDiLQDyfezCSIm1DKFr_60n_FcBsZzDftcAwPhJIXXMv1WdQpbhSqFlJch0mx3zTVk/s320/melody.gif
  7. Use the Preview button to see the effect of these different backgrounds on your template. It will help you get an idea of the kind of possibilities out there.
  8. You are welcome to use one of the above Blogger backgrounds as they are all free to use without any restriction. If you decide to use one of these simply click on Save Template and you are in business. Alternatively go ahead and find your own background image on the net and follow the instructions below to insert it into your Blogger template.