CoffeeShop Drop Shadow Blog Background!

I have had so many people ask me how I add a drop shadow background to my blogs. Well, here is the tutorial!

This is a simple colored background with a white drop shadow area behind your posts. You can download it HERE and follow along with the tutorial.  This file has two layers and can be opened in Photoshop or Photoshop Elements. The bottom layer is a simple color fill layer and the top layer is the white drop shadow area that goes behind your posts.


This background white area is perfect if you have the standard 2-column Blogger Minima template installed, but it will be too narrow
if you have a different template.  If you don't know how wide your blog is, just go to Layout, Edit HTML and look at your template code (don't worry about explanding widget template).  Find the code seen below in your Outer-Wrapper and note the width.  This will tell you the minimum pixel width you need for your white drop shadow background.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Click on the top "post background" layer on the background you just downloaded and then click Ctrl-T (to free transform) and then drag the sides of the white drop shadow to the final width you need. 

If you don't see a ruler on top, simply go to View, Rulers and make sure your ruler preference is set to pixels (Edit, Preferences, Units and Rulers).  Make sure the tiny middle box on top (circled on my screenshot below) stays right under 1000 so your background will be centered correctly!  If you are using Photoshop you don't have to hold shift because you don't need the height to change the same percentage, and if you are using PSE just drag and don't worry.  :-)

I made this white background 1000px wide and made sure it was centered.


Now you might want to adjust the drop shadow settings.  Simply double click on the little icon by Drop Shadow (or the fx on the top layer if you are using PSE) and the little box seen below will pop up.  All I adjust is the Opacity, Distance (I keep it at 0 for blogs), and Size (this setting depends on how dark and obvious you need your shadow).   Then click OK. The first screenshot is from CS4 and the second is from PSE.


Now you can simply change the color that goes around your blog and you are done! Simply click on the little colored box on the "Background color" bottom layer and adjust the color to taste as seen in the screenshot below. Then click OK and you are done! Flatten and save your new background as a .jpg.


Finally, you will want to install your new blog background with a drop shadow! These instructions are for Blogger only. :-) Upload your new flattened background to ImageHost and copy the Hotlink (the last link on the bottom). Then copy the code below and add it anywhere on your blog's Page Elements as a html/javascript gadget. I usually put this on the bottom so I can find it later. Then replace the # in the code with the Hotlink you copied and save the gadget. Your new background should be installed!


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

You might have to go back and center your white area (using Photoshop) if it seems off. And this background will not work with the Blogger Stretch templates.  If you want a black or colored background behind your posts just change the color on the layered file.

My next tutorial will show you how to make a lovely custom textured background with drop-shadow as seen below. I used a free paper from Pixels & Ice Cream on this background.

8 Comments:

Mary Lynn May 26, 2010 at 3:26 PM  

Thank you so much!! I just tried it and it actually worked for me! I did try saving it as a .png at first and it didn't work so when I tried .jpg it did work! Thank you so much!

CBH May 27, 2010 at 9:41 AM  

Thank you so much for this post. I want to let you know that I posted a link to your blog in CBH Digital Scrapbooking Freebies, under the Page 9 post on May. 27, 2010. Thanks again.

CraftCrave May 27, 2010 at 9:48 AM  

Just a quick note to let you know that a link to this post will be placed on CraftCrave today [27 May 02:00pm GMT]. Thanks, Maria

Anonymous May 27, 2010 at 2:51 PM  

I did you tutorial to make my blog wider and also added the "blog wrapper" color to my HTML code. Do I need to delete that in order for this drop shadow to work? I doesn't seem to be working for me.

Rita May 27, 2010 at 3:48 PM  

Anonymous, you shouldn't need to delete the blogwrapper code from the Outer-Wrapper, but make sure that your background's dropshadow is slightly larger than your blog so that you will see it. Otherwise it will be hidden behind the outerwrapper! Rita

Locamoniqua June 11, 2010 at 1:09 PM  

For some reason when I posted the code in my html gadgets it left the entire background white. Any suggestions about what I may be doing wrong?

Mary Lynn August 30, 2010 at 12:12 PM  

I just redid my background and this time it made mine all white. When I inserted the code from imagehost into my background code in the Edit HTML section it worked.

Mom of Mix Kids March 15, 2011 at 11:56 PM  

Why couldn't I make this work? Bummer. I tried to use Photobucket instead of that other place as image host...is this why? The one you metioned said site closed. I've used photobucket before and it worked...???HelP! Thanks.