Making a Background Pattern

Here is how to make a very basic background pattern to use on your webpage. We’ll be using Photoshop to make this.

First, open up a new document, with dimensions 5 pixels by 5 pixels.

Create new document.
Create new document.

Then pick a good solid background color, something not too dark that will match the colors of your website. I went with a medium blue color (#004491).

Background color.
Background color.

Now we choose a darker color to make the pattern on top of the blue background color. You can make any pattern you want. I’m gunna show you two different patterns. One will be just a dotted pattern and the other will be diagonal line. Here are the two patterns:

Dotted Pattern
Dotted Pattern
Diagonal Line Pattern
Diagonal Line Pattern

I used the dark blue color (#001c3b) for the pattern. Just take the pencil tool:

Pencil Tool
Pencil Tool

and click on the center of the 5×5 canvas to make the dot pattern. For the diagonal pattern just click along a diagonal line with the pencil tool. Then just save the image as a gif file “background.gif.”

Now we can insert it into our webpage as the background:

[code lang=”html”]

[/code]

Click here to see examples of these background patterns.

Filed under: TutorialsTagged with: , ,

12 Comments

  1. It’s good to see this information in your post, i was looking the same but there was not any proper resource, thanx now i have the link which i was looking for my research. . . . . .

  2. Can I just say what a relief to find someone who actually knows what theyre talking about on the internet. You definitely know how to bring an issue to light and make it important. More people need to read this and understand this side of the story. I cant believe youre not more popular because you definitely have the gift.

  3. Hey admin, very informative blog post! Pleasee continue this awesome work..

  4. I truly loved this brilliant article. Please continue this awesome work. Regards, Duyq.

  5. It’s good to see this information in your post, i was looking the same but there was not any proper resource, thanx now i have the link which i was looking for my research. . . . . .

  6. I enjoy your articles on here but your Rss has a few XML errors you need to fix. Good website though!

  7. I enjoy your posts on the site but the Rss feed has a couple of XML problems that you ought to correct. Good blog page though!

  8. This particular site is very cool, keep posting amazing material.

  9. Wow! nice website is seriously great, keep putting up awesome material.

  10. This particular blog site is actually interesting, keep putting up great info.


Add a Comment

Your email address will not be published. Required fields are marked *

Comment *
Name *
Email *
Website