Seamless Patterns and How to Use Them With CSS

This is a tutorial I've been wanting to do for a while. I know before I learned this technique I used to save long images to use as backgrounds so they wouldn't repeat. That didn't work very well because I didn't take into account people with really large monitors. This technique will enable you to save small files that repeat over and over again to cut back on loading time and also to account for the variety of device sizes out there.

As mentioned in the tutorial here are the extra links:

Sta.sh upload tutorial:

Additional Background property values: [link]

Also, there is a zip file available for download here [link] that includes the images used, the mockup, and the css files. Please keep in mind that the journal skin in the zip file is not for public use but only for practicing CSS.


Patterns that were used:

Subtle Patterns: [link]
Pattern8: [link]


Thanks for viewing and I sincerely hope this tutorial helps. If you have any questions please let me know!