Sunday, September 20, 2009

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!!!


32 comments:

  1. 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??

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

    ReplyDelete
  3. 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!

    ReplyDelete
  4. 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:)

    ReplyDelete
  5. 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!!

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

    ReplyDelete
  7. OMG!! this so freakin' rocks! and so do you!!

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

    ReplyDelete
  9. 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!

    ReplyDelete
  10. 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 ?

    ReplyDelete
  11. 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?

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

    ReplyDelete
  13. 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?

    ReplyDelete
  14. 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!

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

    ReplyDelete
  16. 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?

    ReplyDelete
  17. 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!

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

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

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

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

    ReplyDelete
  22. 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!!

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

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

    ReplyDelete
  25. 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?

    ReplyDelete
  26. 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!

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

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

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

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

    ReplyDelete

Thank you for taking the time to leave a message, I love reading them! All comments are personally moderated by me and I will post and answer them them as soon as possible.
Rita