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.
1- Find a free pattern of your choice from some quality site likeDinPattern.
2- The patterns might come as a .zip file. Extract the .zip file through7-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:
4- Now, you can add the background pattern in the above code. To do that, change the above code with the following one:
I've uploaded a sample pattern to demonstrate the result. The code for my example is:
And the result is something like this:
Steps
1- Find a free pattern of your choice from some quality site likeDinPattern.
2- The patterns might come as a .zip file. Extract the .zip file through7-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:
Post a Comment