creating a simple blog background for blogger

I'm proud to say I created my own blog background for the first time! This is something I've always wanted to learn to do. I've tried to teach myself several times and it never really clicked but last week I finally got it! Now, I'm terrible at following directions, I'm completely new at this and I have a really old, outdated laptop. Some of the directions I've stumbled across were to complex for my little simple mind and several websites won't even work on my laptop so I had to get a bit creative to make it all work for me. Maybe my very simple steps will help someone else so let me share with you.




Step 1 - Google search "free backgrounds". Find a print you like. Save it to your computer.



Step 2 - Go to picmonkey.com. Upload your print. Add a solid white rectangle to the center of your picture. (The white rectangle will be the center of your blog page.) You can add little stripes or lines to the sides of the white rectangle or whatever you like. Play around with it until you get it the way you want. Save image to your computer.



Step 3 - Go to http://pixlr.com/editor/. Open your image. Up at the top left corner click on the "image tab". Then click on the option "image size." You'll want to size your image 1500 width and 750 height. Save the image to your computer.



Step 4 - Head to photobucket.com. Open your image. Save. Once the image is saved to your album you will see several links below your image. You'll want to copy the direct link code.



Step 5 - Paste the direct link code in the space below that says ("INSERT DIRECT LINK HERE").

Once you've inserted your link copy the entire code below.

<style type="text/css">
body { background-image : url("INSERT DIRECT LINK HERE "); background-position: center; background-repeat: no-repeat;  background-attachment : fixed; }
</style>

<script type="text/javascript">
var div = document.createElement('div');
div.setAttribute('style',"position: absolute; left: 0px; top: 30px; z-index: 50; width: 150px; height: 45px;");
div.innerHTML = '<a target="_blank" href=" "></a>';
document.getElementsByTagName('body').item(0).appendChild(div);
</script>

Step 6 - Open the "layout" on blogger. Click on "add a gadget". Add an "html" gadget. Paste the entire code there. Save. And you're done! 

I found some great directions at thecutestblogontheblock but a few things threw me off. I couldn't figure out how to size an image with the measurements they show. After a little investigation I discovered that 20 inch width and 10 inch height translate to the 1500 width pixels and 750 height pixels. 



Hope these simple directions help you out if you're looking to create you're own simple background!