CoffeeShop Blogger UnWrapped: Adding Image Backgrounds

My goal in these Blogger UnWrapped Tutorials is to teach you how to take a plain Blogger Minima template and make it your own. I realize there are tons of free templates and backgrounds out there, but I think it is more fun to do it on your own (without knowing Html or CSS) and I want to teach you some of the tricks I have learned over the last months. Note: I made a special vintage blog background just for my readers, you can find the download at the end of this post!

Today I am going to show you how to add a pretty image background to your Blogger blog using a Html gadget. When you want to change your background you won't have to touch your Html template at all! Basically, if you can cut and paste, you can be your own Blogger designer. :-)

You have probably noticed that your Blogger blog background right now is a solid color, and it extends past your post area all of the way to the sides of your screen. In order to put an image on the background of your blog but keep a solid color behind your posts (I hate when the posts have a busy background) you will have to do a minor Html template tweak. Before doing this, be sure to Download Full Template (this backs up your original template) in case you mess something up! Yes, I have had experience in this... ;-)



The first thing you have to add is the code that allows you to change your Blog Wrapper Color (this is the solid color background behind your posts that we are adding in this tutorial) via your Layout, Fonts and Colors menu. We are going to assign it to a white color here (#ffffff), but you can change it to any color you wish via your Blogger Fonts and Colors menu later. Just copy this code below and past it as the first Variable Definition toward the top of your template.

<Variable name="blogwrappercolor" description="Blog Wrapper Color"
type="color" default="#fff" value="#ffffff">




Now you have to assign this color to your outer-wrapper. Page down your code until you see the code for your Outer-wrapper (or Ctrl-F and put #outer-wrapper in the search) and copy and paste the code below #outer-wrapper { (as seen in the image above). Then Preview your template to make sure it works (if it doesn't just Clear Edits and start again) and then Save Template.

background: $blogwrappercolor;





Now go to Fonts and Colors and you can see your new Variable definition on top, Blog Wrapper Color. This can be changed to any color you want.



Now my blog wrapper color is blue! You can select any color sample you see on this page, or enter the color hex code of choice (I go to Photoshop or Photoshop Elements, click on the foreground color chip, put in the color I want and then copy the hex# I find in the bottom of the box, or you can use a site like Colour Lovers to find great color ideas).

You can keep everything as is, or add a pattern or image background to the sides of your blog. First you need to find your background. I am going to be posting free blog backgrounds here on my blog (I designed a vintage one you can download for free at the end of this post!), but you can use anything you want. I would suggest checking out the Texture for Layers Flickr Group for free textures if you don't want to make your own by scratch.

Just download the largest version you can find, open it your photo-editing program, make any adjustments in color/contrast, and crop 2000px wide by 1250px high. This is not an exact size, but a size I found works on most monitors. Then upload this background to Flickr (only do this if you have a pro account and have access to your original-sized upload) or my favorite,ImageHost. I usually use ImageHost because it is free and I don't have to clutter my Flickr account with backgrounds.

Grab the original-sized URL (that the HotLink with ImageHost) and paste it in the code below in the box where it says "YOUR PHOTO URL HERE", and make sure to leave the "". Your direct photo link should look like:

http://www.merrypic.com/files/h3nris29doul9jir1.jpg

<style type="text/css"> body {background-image: url("YOUR PHOTO URL HERE"); background-position: top center; background-repeat: no-repeat; background-attachment: fixed; }</style>




Once you have your code finished (I usually do it in Notepad), then go to Layout, Page Elements, and click on Add a Gadget somewhere (I usually use on on the bottom, it won't show on your blog so it can be anywhere) and add a new Html/Javascript gadget and paste the entire code there. This is a great way to add code to your template without editing your template. Save and Preview your blog. Your background should be there and you can change it anytime by putting in a new photo URL.
If you want to use a seamless pattern, use this code:

<style type="text/css"> body {background-image: url("YOUR PHOTO URL HERE"); background-position: top right; background-repeat: repeat; background-attachment: fixed; }</style>




Finally, if you use a background from Flickr or somewhere else that asks for a link back to their site for credit, just add it to your Html. This is a very easy tweak and something you should do to thank someone for their hard work.



Paste this code (replacing the http with your photo URL and the text "Background Texture Created... with your own text) just above the "end outer-wrapper" and Save Template.

<center> <a href=' http://www.flickr.com/photos/220466@N08/ '>Background Texture Created by Rita of CoffeeShop</a> </center>




You can see the clickable link on the bottom of your outer blog wrapper. You are done! Now go click on the blog background below to download it for free!



Help support the CoffeeShop Blog and save money at the same time! Enter the code "September" for 10% off this month!!!


34 Comments:

Kathy September 20, 2009 at 8:27 PM  

This is GREAT! Thank you!

Digi Free September 20, 2009 at 9:49 PM  

Thank you! Your blog post will be advertised on the DigiFree Digital Scrapbooking Freebie search engine today (look for timestamp: 20 Sep [LA 07:00pm, NY 09:00pm] - 21 Sep [UK 02:00am, OZ 12:00pm] ).

Stefunkc September 20, 2009 at 10:13 PM  

I can't get it to work! And you've made it very easy! I've added the two things to the template but my blog wrapper and background stay the same color. I can't seem to get the part behind the posts to be one color. Anyone have any tips??

Rita September 20, 2009 at 10:21 PM  

Stefunkc, after saving the template did you try changing both of the colors in Fonts and Colors? Maybe you have both saved as the same color.

Stefunkc September 20, 2009 at 10:26 PM  

Yes, I've been trying for a while now. I've tried several colors and saved, previewed, and tried again. I've even started over from the beginning! Whatever the 'wrapper' color is, that's what the whole background is. And thanks so much for replying!

CreativeBusyHands-Scrapbook Freebies Search September 21, 2009 at 9:45 AM  

Thank you so much for this Freebie. I want to let you know that I posted a link to your blog in CBH Digital Scrapbooking Freebies, under the Page 6 post on Sep. 21, 2009. Thanks again.

way outnumbered September 21, 2009 at 10:19 AM  

Thanks for the detailed instructions! I've made my own blog background using lots of your tips, but honestly not sure how I did it and not sure I could do it again!! I'm printing this out for future reference:)

Heitmann Family September 21, 2009 at 8:42 PM  

You are simply amazing. I have always wondered how they do that and I have been wanting to do it myself. Thank you, thank you!!

Charisse September 24, 2009 at 12:46 AM  

This is great Rita! I was just trying to get my blog together and was wondering how to do this.

Thank you so much. You are awesome for sharing your knowledge so freely.

{Susan...Seriously.} October 6, 2009 at 7:56 PM  

OMG!! this so freakin' rocks! and so do you!!

Alisia October 11, 2009 at 4:20 PM  

thank you so much for posting this. i have wanted to change my template for a long time. however, i'm having trouble getting blogger to take the background texture. i tried flickr and merrypic. bummer!

ps. you are amazing! thanx for all you do for photographers!!! xx

Christine Richmond Photography November 24, 2009 at 4:10 PM  

I've spent HOURS searching google trying to figure out how to get my posts to stay white while having the background picture. I finally remembered that you had a tutorial on it and it WORKED on the first try! Thank you for keeping me from banging my head upon my desk repeatedly!

Lazuardy Firdaus December 1, 2009 at 6:11 AM  

Thank you for your tutorial, this is very useful for me and i wish i could apply to my new blog. Btw may i post on my blog ?

Natalie December 2, 2009 at 3:22 PM  

So excited about this! I got the middle color to change, but I can't seem to get the background to change. I think I've followed all directions...I tried merrypic and photobucket, using the direct link. Anyone have any suggestions?

Chantelle December 25, 2009 at 2:22 PM  

i am having the same problem as the final poster. i uploaded to flickr and cant get the background design to show up at all. it just stays a solid color. any ideas how to get the texture to show? the adding a gadget didnt work

Nicole Chryst December 30, 2009 at 12:17 PM  

I am also having the problem of getting the background to work with flickr. I can get the wrapper to work, but not the background. I wonder what I'm doing wrong?

Nicole Chryst December 30, 2009 at 1:19 PM  

Nevermind, I got it when using merrypic AND keeping the ("") part. Thank you AGAIN, now my blog is the same as my website and business cards!

Aly January 4, 2010 at 2:53 PM  

Thank you thank you thank you! I have been on your blog for practically 3 days straight. I am overwhelmed by how many things I just have to try!

The trick with this is to leave both the parenthases and quotation marks around your image.

Leanne...the walker January 20, 2010 at 8:05 AM  

I have followed the instructions perfectly and they worked no trouble... Then a few days ago I noticed that the image is only showing up on the VERY bottom of my blog and not as the background anymore. I've deleted and re-added with no luck. Any ideas?

Catherine January 31, 2010 at 12:13 PM  

Nevermind! I tried one more time and it worked!!! Not sure what I did but it's working and I'm happy. :) THanks for the tutorial and all the actions!

Sarah February 2, 2010 at 1:33 PM  

Thank you so much! I started a new blog yesterday and had fun creating a fun background and header.

Shutterstitch February 26, 2010 at 9:00 PM  

When I did this the background image shows up once at the top of the page and doesn't tile (repeat itself over and over throughout the length of the blog). What am I doing wrong? I went back and tried the directions several times.

Tammie March 16, 2010 at 9:17 PM  

I need help! I have uploaded to imagehost but couldn't find the exact link to grab there, and I am having trouble finding where to paste it in the html. Can you help me? I don't know what I am doing wrong. Thanks in advance for everything.
Tammie

Tammie March 17, 2010 at 8:23 AM  

Never mind, I got it figured out! Now to get just the right background,,,, Thanks

Angela Marie April 14, 2010 at 4:41 PM  

THANK YOU SO MUCH!!! I've been wanting to do these types of things to my blog for sooo long and didn't know how. I am learning so much from you...thanks again!!

Brislane Interiors July 29, 2010 at 8:58 PM  

I dont have the Fonts and Colours tab between Page Elements and Edit HTML...and I dont have access to the HTML for Outer Wrapper...do you know why?
http://brislaneinteriors.blogspot.com
Thanks - Beth

neki desu August 1, 2010 at 7:56 AM  

just found this and i can't thank you enough. off to tweak my blog with a textured background :)

Heather August 4, 2010 at 6:37 PM  

I've added this to my new blog, but can't get it the image to go all the way to the edges of the screen. Some padding issue perhaps?

Cadena Photography October 4, 2010 at 4:11 AM  

I've been stuck for several days trying to figure this out! I have the simple template, can't seem to figure out how to change to the minima template, and I'm not finding "#outer-wrapper". Someone help!

Cadena Photography October 4, 2010 at 1:21 PM  

Oh my goodness, almost immediately after I posted I needed help, I figured it out! Thank so much for these amazing tutorials!

Anonymous November 10, 2010 at 10:33 PM  

Cadena-- how did you find the #outer-wrapper?? I'm also not seeing it....???

Liz Lopez May 13, 2011 at 9:23 PM  

Thank you for your tutorials, they are awesome and very easy to follow. I have a small blog but I like to play with it.

Debbie Rumpza Photography November 16, 2011 at 10:59 AM  

I'm not seeing outer wrapper at all.

Rita November 16, 2011 at 11:35 AM  

This tutorial might not work on newer Blogger templates. Just revert to an older version.