HOME | DD

fantasy-alive — Seamless Patterns and How to Use Them With CSS

Published: 2013-01-04 17:02:56 +0000 UTC; Views: 7758; Favourites: 325; Downloads: 115
Redirect to original
Description 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!
Related content
Comments: 30

Kitty1Cat2 [2018-10-12 21:17:42 +0000 UTC]

This tutorial helped me so much! Thank you

👍: 0 ⏩: 0

Darklady57 [2013-08-29 03:51:59 +0000 UTC]

Thank you.

👍: 0 ⏩: 0

serafina-rose [2013-03-03 16:50:45 +0000 UTC]

Thank you so much...

👍: 0 ⏩: 0

KovoWolf [2013-01-14 21:26:11 +0000 UTC]

This is such a great tutorial, thank you!!

👍: 0 ⏩: 1

fantasy-alive In reply to KovoWolf [2013-01-15 02:38:34 +0000 UTC]

Thanks so much. I'm glad you like it!

👍: 0 ⏩: 0

darki6 [2013-01-14 18:12:00 +0000 UTC]

muchas gracias

👍: 0 ⏩: 1

fantasy-alive In reply to darki6 [2013-01-15 02:39:44 +0000 UTC]

👍: 0 ⏩: 0

zeranote17 [2013-01-14 04:28:47 +0000 UTC]

awesome!

👍: 0 ⏩: 1

fantasy-alive In reply to zeranote17 [2013-01-15 02:38:43 +0000 UTC]

Thanks!

👍: 0 ⏩: 0

animegirl007 [2013-01-07 00:42:29 +0000 UTC]

Thanks for the help

👍: 0 ⏩: 1

fantasy-alive In reply to animegirl007 [2013-01-09 22:56:54 +0000 UTC]

No problem.

👍: 0 ⏩: 0

Cinnamon-Heart [2013-01-06 13:43:21 +0000 UTC]

Very good and thorough! It covers all the possible details and is great for beginners, but it is also very easy to skim for people knowing most of the steps and only searching for particular thing.

👍: 0 ⏩: 1

fantasy-alive In reply to Cinnamon-Heart [2013-01-09 22:57:19 +0000 UTC]

Thanks!

👍: 0 ⏩: 0

jonas103 [2013-01-05 13:10:44 +0000 UTC]

Great tutorial!
You could also use css gradients to make cool areas or buttons

👍: 0 ⏩: 1

fantasy-alive In reply to jonas103 [2013-01-05 16:31:56 +0000 UTC]

Thanks! That's true, I usually don't use CSS gradients much but it is very handy.

👍: 0 ⏩: 0

yooci [2013-01-05 11:00:16 +0000 UTC]

I never actually thought about it this way. Thanks for sharing!

👍: 0 ⏩: 1

fantasy-alive In reply to yooci [2013-01-05 16:32:09 +0000 UTC]

Not a problem!

👍: 0 ⏩: 0

vanmall [2013-01-05 09:51:31 +0000 UTC]

Awesome tutorial.

👍: 0 ⏩: 1

fantasy-alive In reply to vanmall [2013-01-05 16:32:18 +0000 UTC]

Thanks you!

👍: 0 ⏩: 0

gillianivyart [2013-01-04 23:48:04 +0000 UTC]

Texture everything!!!! ;D I am addicted to textures, journal skins without are flat

👍: 0 ⏩: 1

fantasy-alive In reply to gillianivyart [2013-01-05 16:34:35 +0000 UTC]

I agree. I try to use textures in all my web designs/journal skins unless there is a good reason not to.

👍: 0 ⏩: 1

gillianivyart In reply to fantasy-alive [2013-01-05 18:20:58 +0000 UTC]

No such thing! hahaha! We need textured text.

👍: 0 ⏩: 1

fantasy-alive In reply to gillianivyart [2013-01-06 00:00:28 +0000 UTC]

We need to texture everything!

👍: 0 ⏩: 0

pica-ae [2013-01-04 19:20:47 +0000 UTC]

nice one

👍: 0 ⏩: 1

fantasy-alive In reply to pica-ae [2013-01-04 21:11:04 +0000 UTC]

Thank you.

👍: 0 ⏩: 1

pica-ae In reply to fantasy-alive [2013-01-13 21:28:15 +0000 UTC]

you're welcome

👍: 0 ⏩: 0

Ikue [2013-01-04 19:05:49 +0000 UTC]

Vert nice.

👍: 0 ⏩: 1

fantasy-alive In reply to Ikue [2013-01-04 21:11:12 +0000 UTC]

Thanks!

👍: 0 ⏩: 0

GinkgoWerkstatt [2013-01-04 17:46:28 +0000 UTC]

Great tutorial!
Also love the way you presented everything. Very well structured and easy to follow.

👍: 0 ⏩: 1

fantasy-alive In reply to GinkgoWerkstatt [2013-01-04 17:51:15 +0000 UTC]

Thanks so much.

👍: 0 ⏩: 0