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
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.
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.
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 MATCHor your pattern will
You must enable CSS Images in your output to render Image Patterns – that’s it, click Export Now and watch the magic!