Use Export Kit to create unlimited CSS Background Image Patterns quickly and easily with a few simple steps. Many other pattern solutions involve creating a full image, which can lead to large assets for the end-user to download.

Export Kit has an advanced CSS Theme Engine which simplifies the process of creating background patterns. When you use CSS to generate your background, you have much smaller image assets for the end-user, along with greater flexibility in making modifications to your patterns.

Step 1: Draw the Pattern Area

Create an area to render your CSS Image Pattern. You can do this by creating a Rectangle Shape inside your PSD design.

This is the area your Pattern will fill.  You may want your Pattern Area to match the scale of your Tile, you will have to do this manually.

EXAMPLE: if your Tile is 10x10, a correct scale is 80x80 - not 80x85, etc.

Step 2: Style the Pattern Area

You can add any Layer Style name to your Pattern Area. This name must reflect the name of the Tile you plan to use in the CSS pattern.

Eg. ${css|style:test}

Eg. ${css|style:tile1}

Step 3: Create a Tile

Place any image inside your CSS Styles Folder and change the name of the layer to match the Pattern Area Style you named in Step 2. This will be used as the Tile in the Image Pattern and will render to fill the Pattern Area.

Eg. test

Eg. tile1

Image Patterns have simple logic, if the tile is smaller than the area - it will tile to fill the area.

Step 4: Export Settings

IMPORTANT: Your style names in Step 2 and 3 MUST MATCH or your pattern will NOT render.

You must enable CSS Images in your output to render Image Patterns – that’s it, click Export Now and watch the magic!