Blogspot How To: Create a Beautiful Header Using Patterns

Patterns are small images which can repeat in the background. They are small in size and create an awesome background. In this simple tutorial, I'll show you how you can add a pattern in your header background to make it more beautiful and eye-catching.

Steps

1- Find a free pattern of your choice from some quality site like DinPattern.

2- The patterns might come as a .zip file. Extract the .zip file through 7-Zip and then upload the pattern on Blogger (Need Help?) and get the address/URL of that image.

3- Go to Design and then Edit HTML tab. Find this code:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

4- Now, you can add the background pattern in the above code. To do that, change the above code with the following one:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background: url(Paste the address of the pattern you uploaded in Step 2 here);
}

I've uploaded a sample pattern to demonstrate the result. The code for my example is:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background: url(http://www.dinpattern.com/tiles/indian-summer.gif);
}

And the result is something like this:

Need My Help?

If you can't find the above code or have some other problem, feel free to leave me a comment.