Back to Top

0 Create Your Own Blog Background With Perfect Sizes

Modifying the blog’s background as per your own choice is way easier now. It would certainly be a fun to create some beautiful or professional backgrounds as per website need. Stop searching for thousands of custom made blog templates and follow these simple instructions to give your blog a totally new look.

This tutorial will guide you create your blog's own background in the easiest way.

I used free photo editing software but you can use your own. Please take care of piracy while using software and copyright issues while searching images from the internet. Try to use free images and editing software. While creating a raw image or new page use following sizes. You can use Paint.NET, PhoXo, PixBuilder Studio etc. One of the good sites I found is freedigitalscrapbooking.com; there are many of them on search engines easily available.

background size

Choose different textures, logos and part drawings which you want to apply on your background. Such as main background theme suitable for your blog, additional pictures and logos etc. I will be using few of the following designs and images.

Background Textures and Logos

Most important thing here is the size which will fit into blog layout after upload. Normally we have 20 inch wide and 10-inch deep blog size. For posts showing up in a centre, you will need the following setup. For those templates which have left side margin setup, you may need to edit sizes accordingly. (In Photoshop Go to > View > Rulers, Ctrl + R to setup a ruler on your page)

Here is a simple example.

Background Sizes for Blog

Be the best of yourself to create your own beautiful/professional background. I somehow managed to make my own background for a boutique site. For three column blog use 10 Inch wide open space and 8 Inch for two column wide blog templates.

Background ready for Upload

Upload this ready image on some free photo stock site such as imgur.com Copy the "Direct Link" from the website and copy at a clipboard. Smartly copy this link into following codes.

<style type="text/css">
body { background-image : url("insert your image direct link here"); background-position: center; background-repeat: no-repeat;  background-attachment : fixed; }

<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>';

Applying codes on your Blog:
Go to Design > Layout section
Click on 'Add a Gadget'
Select HTML/JavaScript gadget in the list
Paste the above set of codes into it and Save!!

Done! Your Blog is ready with your own custom background.
Note: If you see any size mismatch accordingly modify your image sizes and re-paste codes with a new image link.

Keep reading and happy blogging!
Related Posts Plugin for WordPress, Blogger...