Loading...

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.

Using the Plugin

How To Guides

Help Us Improve


We aim to keep our content relevant with useful information, examples, samples and links. Tell us what you think!

I found the content:

Helpful
Confusing
Outdated
Broken Links
Bad Spelling
Too Short
Too Long

This page needs:

Nothing
Better Content
Links
Examples
Videos

Free Download


One Pager Website

A clean professional single page website design.

Start Your 14 Day Free Trial

Get instant access to your 14 Day Free Trial and Free Online Training. We guarantee your first conversion will 100% work - we work with you to ensure this, Contact Us or check the Community FAQs for assistance.

Connect With Us

Black Friday Sale get 60% Off everything - Shop Now.