Create CSS Background Image Patterns

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.

Before you create Image Patterns you should read more about Creating Custom CSS Styles.

Step-By-Step Video

Need a visual? Watch our step-by-step tutorial!

Watch more video tutorials.

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!

LOGIN NOW: Get instant access to our free Online Training - click here.

02. Using The Plugin

03. Layer Support

04. Basic Exports

05. Layer Tags

06. Optimization Tips

07. Complete Exports

🚀 Start saving time and money!