Tutorial : A pattern on your Website

December 17, 2010 @ 13:00 in Tutorial by Henri Louis

Repper Pattern enhanced Website

In this tutorial we’re going to make a pattern that fits on a website and integrate that pattern on the website. As an example, i’m going to put a pattern in the footer (bottom part) of repperpatterns.com.

We’ll go trough the process step by step, after the jump.

Creating the Pattern Tile

Open the Repper and insert an image. In this example I inserted a tile I crafted before, because it produces even more complex and beautiful patterns when you base them on patterns.

I’m putting the colour setting to black & white, so it suits our grey footer. Also, colourful patterns are beautiful, but harder to integrate in a website without people getting distracted from the content of the website.

The pattern type i’m going for is the P6M pattern. It produces star-like patterns and i want a kind of x-massy feel.

Play around yourself and save some patterns you think are worthy tiles.

Using Black & White, P6M, and an old Pattern Tile

Note: in this case, i used Photoshop afterwards to invert the pattern, and reduce the opacity to make it less prominent.

Integrating it in the Website

Pick out one of your freshly made patterns, so we can integrate it in your website. Some basic html/css-knowledge is required in the next part.

Upload the tile on your web server in the same directory the main CSS file is located. CSS luckily supports the option to tile an image in the background, so we don’t need to do that ourselves. In the CSS of the website add this to the element you want to put the pattern in:

  • background: url(‘nameofthetile.jpg’) repeat;

In our case it was in #footer, so you get:

In our footer.css it looks like this.

The result:

Twitter also has a background tile option, so you could also use your created pattern on twitter without coding!