Shop Mobile More Submit  Join Login
Seamless Patterns and How to Use Them With CSS by fantasy-alive Seamless Patterns and How to Use Them With CSS by fantasy-alive
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!
Add a Comment:
 
:icondarklady57:
Darklady57 Featured By Owner Aug 28, 2013
Thank you.
Reply
:iconserafina-rose:
serafina-rose Featured By Owner Mar 3, 2013  Hobbyist Digital Artist
Thank you so much...
:rose: :dalove:
:iconflyingheartsplz:
Reply
:iconkovowolf:
KovoWolf Featured By Owner Jan 14, 2013  Professional General Artist
This is such a great tutorial, thank you!!
Reply
:iconfantasy-alive:
fantasy-alive Featured By Owner Jan 14, 2013  Professional Interface Designer
Thanks so much. I'm glad you like it! :D
Reply
:icondarki6:
darki6 Featured By Owner Jan 14, 2013
muchas gracias
Reply
:iconfantasy-alive:
fantasy-alive Featured By Owner Jan 14, 2013  Professional Interface Designer
:D
Reply
:iconzeranote17:
zeranote17 Featured By Owner Jan 13, 2013
awesome!
Reply
:iconfantasy-alive:
fantasy-alive Featured By Owner Jan 14, 2013  Professional Interface Designer
Thanks!
Reply
:iconanimegirl007:
animegirl007 Featured By Owner Jan 6, 2013
Thanks for the help :nod:
Reply
:iconfantasy-alive:
fantasy-alive Featured By Owner Jan 9, 2013  Professional Interface Designer
No problem. :D
Reply
:iconcinnamon-heart:
Cinnamon-Heart Featured By Owner Jan 6, 2013  Hobbyist Digital Artist
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.
Reply
:iconfantasy-alive:
fantasy-alive Featured By Owner Jan 9, 2013  Professional Interface Designer
Thanks! :D
Reply
:iconjonas103:
jonas103 Featured By Owner Jan 5, 2013  Student Interface Designer
Great tutorial!
You could also use css gradients to make cool areas or buttons :)
Reply
:iconfantasy-alive:
fantasy-alive Featured By Owner Jan 5, 2013  Professional Interface Designer
Thanks! That's true, I usually don't use CSS gradients much but it is very handy.
Reply
:iconyooci:
yooci Featured By Owner Jan 5, 2013  Hobbyist General Artist
I never actually thought about it this way. Thanks for sharing! :happybounce:
Reply
:iconfantasy-alive:
fantasy-alive Featured By Owner Jan 5, 2013  Professional Interface Designer
Not a problem! :D
Reply
:iconvanmall:
vanmall Featured By Owner Jan 5, 2013  Hobbyist Digital Artist
Awesome tutorial. :)
Reply
:iconfantasy-alive:
fantasy-alive Featured By Owner Jan 5, 2013  Professional Interface Designer
Thanks you!
Reply
:icongillianivy:
GillianIvy Featured By Owner Jan 4, 2013  Hobbyist General Artist
Texture everything!!!! ;D I am addicted to textures, journal skins without are flat :giggle:
Reply
:iconfantasy-alive:
fantasy-alive Featured By Owner Jan 5, 2013  Professional Interface Designer
I agree. I try to use textures in all my web designs/journal skins unless there is a good reason not to.
Reply
:icongillianivy:
GillianIvy Featured By Owner Jan 5, 2013  Hobbyist General Artist
No such thing! hahaha! We need textured text. :nod:
Reply
:iconfantasy-alive:
fantasy-alive Featured By Owner Jan 5, 2013  Professional Interface Designer
We need to texture everything! :D
Reply
:iconpica-ae:
pica-ae Featured By Owner Jan 4, 2013  Professional Interface Designer
nice one :clap:
Reply
:iconfantasy-alive:
fantasy-alive Featured By Owner Jan 4, 2013  Professional Interface Designer
Thank you. :D
Reply
:iconpica-ae:
pica-ae Featured By Owner Jan 13, 2013  Professional Interface Designer
you're welcome :hug:
Reply
:iconikue:
Ikue Featured By Owner Jan 4, 2013  Hobbyist Digital Artist
Vert nice. :)
Reply
:iconfantasy-alive:
fantasy-alive Featured By Owner Jan 4, 2013  Professional Interface Designer
Thanks!
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jan 4, 2013
Great tutorial! :aww:
Also love the way you presented everything. Very well structured and easy to follow.
Reply
:iconfantasy-alive:
fantasy-alive Featured By Owner Jan 4, 2013  Professional Interface Designer
Thanks so much.
Reply
Add a Comment:
 
×
Download JPG 692 × 7297

Featured in Collections

css tutorials by MelikeBAt

. by MinaBeana


More from DeviantArt



Details

Submitted on
January 4, 2013
Image Size
1.3 MB
Resolution
692×7297
Link
Thumb
Embed

Stats

Views
4,772 (2 today)
Favourites
336 (who?)
Comments
29
Downloads
93
×