So, you've finally mastered creating repeat patterns in Adobe Illustrator and you have this really cute pattern that you want to use as your website background. You save it for web, upload the graphic into your WordPress media folder, and excitedly refresh your page. It's awesome! Wait - what!? Why can you see the repeats? Where is that border coming from around your image - it worked perfectly in Illustrator?!

Read on to find out how to fix your pattern repeats on your website...

It's really helpful if you are an illustrator, graphic designer or surface pattern designer of any kind to have at least basic web design skills. Mine are just that - basic. I rely heavily on Google, Wordpress Forums, w3school and classes on Lynda.com. (It is also helpful to be married to a software developer, although I am trying to do as much as I can on my own.)  When I set up this website I wanted to be able to showcase my repeat patterns as background images and in my header.

But I kept running into a problem - when I uploaded my images to WordPress and set them as my background image I could always see a very faint line where the pattern repeated. After a lot of head scratching I finally discovered that there was a one pixel transparent border that was totally ruining the effect, but I couldn't figure out where it was coming from. The repeats worked perfectly in Illustrator. When I searched online I found other people who were struggling with this same issue but I could not find a clear answer. Since I knew the pattern worked perfectly in Illustrator I assumed this was a problem with borders, margins, or padding in my .css.

It turns out however that it was an Adobe Illustrator issue after all! The border appears when you save your image for web without having your artboard aligned to the pixel grid.

After a couple of hours searching and posting on the WordPress forum I found this article which showed me how to remove one pixel transparent borders from my PNG files. Click over for great screenshots and explanations:

White border around transparent PNG after Illustrator export?

Following the steps in this article fixed my issue. Each time exported my artwork from Adobe Illustrator I was sizing the art board to fit the selected artwork wherever it happened to be located on the the screen. This was causing my art board to not be aligned to the pixel grid and giving me a transparent border in my PNG file.

So now I have a new routine. I make sure the art board is aligned as described in the article and has the same dimensions as my artwork. Then, I use the align tool to align the artwork to the art board before exporting by saving for web.

Voila! No more pesky transparent borders - only seamless repeats!

(Since writing this article not only have my web design skills greatly improved but I decided to go with a cleaner website design and ditched the pattern repeat in the background. 1/30/2017)