Tag Archives: Patterns in CSS

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%;
}

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