Where Do Patterns Go? Part 2: Patterns for Your Webpage

Patterns add flavor to your webpage, making it unique and unforgettable. As a pattern designer, you will probably want to make your patterns yourself, and all the Artlandia tools, SymmetryWorks, SymmetryShop, and SymmetryMill, will let you do that. But if you are in hurry, there’s a wealth of patterns on Pattern Central that you can deploy right away, either as is or tweaked to suit your needs.

To that end, for every shared pattern set, Pattern Central gives you a direct link to a pattern tile. The tile is exactly what you need for your page CSS (or the HTML style attribute).

For instance, to re-create the first pattern from a shared set, like “SymmetryMill Blending Modes,” get its tile image and upload it to your website or link directly to the tile. For a pattern to run through the body of a page, you can add this class to the body tag (the background-size property is optional and needed only if you want to scale the pattern):

.pattern {
background-image: url("http://artlandia.com/share/tile/17b819be244e76a");
background-repeat: repeat;
background-size: 30%;
}

Background pattern in the body
A sample webpage with a background pattern in the body (open in your browser or experiment in CodePen).

Of course, you will pay attention to the license for patterns you plan to use. If the license requires attribution, you can satisfy it by providing a link to the pattern page, as is done in the above example.

It is easy to scale a pattern that you grab from Pattern Central (as you just saw) or change the pattern appearance by applying CSS filters. For instance, to convert a pattern created from a Nevit Dilmen’s photo to grayscale (desaturate), your CSS can contain:

.grayscale {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

Desaturated pattern from Pattern Central
Using a desaturated pattern from Pattern Central (open in your browser or experiment in CodePen).

When a pattern serves as a background for other content, such as overprinted text, you will often want to make the pattern rather subtle, which you can do by simply giving it a lower opacity:

.subtle {
opacity: .2;
}

Background from van Gogh's The Potato Eaters in the Infinite van Gogh series
A subtle background from van Gogh’s The Potato Eaters in the Infinite van Gogh series (open in your browser or experiment in CodePen).

And when you want to pin a specific point to the upper left corner of the pattern (rather than use whatever happens to be there in the original tile image), you can use  the background-position property:

.position {
background-position: -120px 20px;
}

Sidebar from van Gogh's Cafe Terrace at Night from the the Infinite van Gogh series
A pattern sidebar created with van Gogh’s Cafe Terrace at Night from the the Infinite van Gogh series (open in your browser or experiment in CodePen).

In most of the examples above, patterns scale with the window size, but if you want  to keep a fixed repeat size, you can do that too:

.fixed-scale {
background-size: 100px;
}

Constant pattern repeat example
The width of the oval shape in this sample webpage scales with the page, keeping the pattern repeat constant (open in your browser or experiment in CodePen). The pattern was created from a carnival photo by Starus.

We have not paid much attention to code organization in this post, but the sample code should be self-explanatory, and here’s a quick rundown for the curious:

Happy patterning!

Leave a Reply

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

You may use basic HTML tags, including <b>, <i>, <strike>, and <blockquote>.