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.

8 comments:

  1. @ tigerliily, if you create a header in PS, feel free to ask for help, I'd love to do that!

    ReplyDelete
  2. Hi Bilal,

    I tried to add a graphic from DinPattern and it didn't work? The url code was different than yours. You said to download the graphic to the computer, but when I "uploaded" the zip file, I no longer have a url code?

    HELP PLEASE!

    TC

    ReplyDelete
  3. @ TC STYLIST, don't upload the .zip files. They are actually containers and pattern image is packed inside them. You need a software like 7-Zip (?) to extract the contents of a .zip file. After extraction, upload the image on Blogger (?) and then apply the tutorial.

    However, in your template, the step 3 code will look like this:

    #header-wrapper {
    width:750px;
    margin:0 auto 10px;
    }

    and you've to change it to:

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

    ReplyDelete
  4. hello...can u pls explain me how to get a url of pattern or image....thank u

    ReplyDelete
  5. i don't understand .....
    someone help me

    ReplyDelete
  6. @ FuNkY_STreET, this is an old tutorial to add patterns or images in the header background. I'll soon update it.

    ReplyDelete

Note: All comments will be moderated.