Tuesday, July 17, 2012

Modify Background With CSS

Background has an important function for a blog or website. In addition the convenience of readers, the beauty and eye catching blog also depends on the background. The blog background is the most basic part of the blog, many blogs have the same background. To differentiate our blog with others, the easiest thing is change the background of the blog. Usually the blog background using an image or color, many ways to change the blog background. One of them is change the blog background using css code.

Change the background of your blog actually be done using blogger template editor. But if you are not use default template from blogger, it can't be done. The only way is to manually change the background, through the edit html page. Before changing the css code, I recommend downloading the tempalte you, just in case if something goes wrong.

The first step to change the background template with css is login into blogger dasboard >>setting>>edit html>>expand template widget, use ctrl + f to find body {background:..............}Copy and paste the following code to replace the body code :
body{background:-webkit-linear-gradient(-45deg, #ffffff 22px, #E6E6E6 22px, #E6E6E6 24px, transparent 24px, transparent 67px, #E6E6E6 67px, #E6E6E6 69px, transparent 69px),-webkit-linear-gradient(225deg, #ffffff 22px, #E6E6E6 22px, #E6E6E6 24px, transparent 24px, transparent 67px, #E6E6E6 67px, #E6E6E6 69px, transparent 69px)0 64px;-moz-linear-gradient(-45deg, #ffffff 22px, #E6E6E6 22px, #E6E6E6 24px, transparent 24px, transparent 67px, #E6E6E6 67px, #E6E6E6 69px, transparent 69px),-moz-linear-gradient(225deg, #ffffff 22px, #E6E6E6 22px, #E6E6E6 24px, transparent 24px, transparent 67px, #E6E6E6 67px, #E6E6E6 69px, transparent 69px)0 64px;-o-linear-gradient(-45deg, #ffffff 22px, #E6E6E6 22px, #E6E6E6 24px, transparent 24px, transparent 67px, #E6E6E6 67px, #E6E6E6 69px, transparent 69px),-o-linear-gradient(225deg, #ffffff 22px, #E6E6E6 22px, #E6E6E6 24px, transparent 24px, transparent 67px, #E6E6E6 67px, #E6E6E6 69px, transparent 69px)0 64px;-ms-linear-gradient(-45deg, #ffffff 22px, #E6E6E6 22px, #E6E6E6 24px, transparent 24px, transparent 67px, #E6E6E6 67px, #E6E6E6 69px, transparent 69px),-ms-linear-gradient(225deg, #ffffff 22px, #E6E6E6 22px, #E6E6E6 24px, transparent 24px, transparent 67px, #E6E6E6 67px, #E6E6E6 69px, transparent 69px)0 64px;background-size: 64px 128px; repeat;font-family:arial,verdana,helvetica,tahoma,Sans-serif;font-size:100%;width:100%;margin:10px 0 0 0;padding:0;} 
Replace some parts of the code :
#ffffff = (white) with your color;
And then save your template.

Posted by: Denmas Tugino
Godheg Updated at: Tuesday, July 17, 2012