HOME | DD

pica-ae — CSS Tricks: Background Images
Published: 2013-01-20 15:06:45 +0000 UTC; Views: 56360; Favourites: 469; Downloads: 0
Redirect to original
Description body div#devskin7405315 * { background:transparent; border:none; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; margin:0; padding:0; } /* ------------------------------ GENERAL ------------------------------ */ body div#devskin7405315 .gr1 { display:none; } body div#devskin7405315 .gr2 { display:none; } body div#devskin7405315 .gr3 { display:none; } body div#devskin7405315 .tri { display:none; } body div#devskin7405315 h2 img { display:none; } body div#devskin7405315 a { color:#98ab0a; text-decoration:none; transition:color 0.5s; -moz-transition:color 0.5s; -webkit-transition:color 0.5s; -ms-transition:color 0.5s; -o-transition:color 0.5s; } body div#devskin7405315 a:hover { color:#b4cc00; text-decoration:underline; } body div#devskin7405315 h1, body div#devskin7405315 h2, body div#devskin7405315 h3, body div#devskin7405315 h4, body div#devskin7405315 h5, body div#devskin7405315 h6 { font-family:Georgia, serif; color:#414d4c; letter-spacing:0px; font-weight:bold; } body div#devskin7405315 .text ::selection { background:#f2d649; } body div#devskin7405315 .text ::-moz-selection { background:#f2d649; } body div#devskin7405315 .gr-box { } body div#devskin7405315 .gr-genericbox { border:none; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; position:static; background:url(https://i451.photobucket.com/albums/qq231/pica-ae/img_background.jpg) #f2f2f2; margin:10px 0px; padding:0px; font-family:Verdana; font-size:13px; line-height:20px; color:#333333; text-shadow:#ffffff 0px 1px 0px; } body div#devskin7405315 .divider { background:#cccccc; display:block; height:1px; } /* ------------------------------ GR-TOP ------------------------------ */ body div#devskin7405315 .gr-top { border:none; position:static; background:#4a5d4e url('https://dl.dropboxusercontent.com/u/22307794/css/CR/gr-top_trans.png') center; color:#FFFFFF; margin:0px!important; padding:0px!important; } body div#devskin7405315 .gr-top .gr { border:none; background:transparent; margin:0px!important; padding:40px 20px!important; margin:auto!important; max-width:680px; } body div#devskin7405315 .gr-top h2, body div#devskin7405315 .gr-top h2 a { background:url('https://dl.dropboxusercontent.com/u/22307794/dA/profile/TriCSS.png') no-repeat top left; color:#98ab0a; text-shadow:#37413e 0px 1px 0px; font-weight:normal; font-size:32px; letter-spacing:0.1px; padding-top:90px; transition:color 0.5s, box-shadow 0.5s; -moz-transition:color 0.5s, box-shadow 0.5s; -webkit-transition:color 0.5s, box-shadow 0.5s; -ms-transition:color 0.5s, box-shadow 0.5s; -o-transition:color 0.5s, box-shadow 0.5s; } body div#devskin7405315 .gr-top h2 a:hover { color:#b4cc00; text-decoration:none; text-shadow:#37413e 0px 2px 1px; } body div#devskin7405315 .gr-top .timestamp { display:none; } body div#devskin7405315 .gr-top span { border:none; background:transparent; margin:0px!important; padding:0px!important; } /* ------------------------------ GR-BODY ------------------------------ */ body div#devskin7405315 .gr-body { position:static; border:none; background:transparent; margin:0px; padding:0px; } body div#devskin7405315 .gr-body .gr { position:static; border:none; background:transparent; margin:0px!important; padding:0px!important; } /* ------------------------------ TEXT ------------------------------ */ body div#devskin7405315 .text { background:transparent; padding:20px; margin:auto; max-width:680px; } body div#devskin7405315 .text p { display:inline; } body div#devskin7405315 .text h1 { display:block; margin:0px!important; padding:0px; font-size:24px; } body div#devskin7405315 .text h2 { font-size:21px; } body div#devskin7405315 .text h3 { font-size:18px; } body div#devskin7405315 .text h4 { font-size:16px; } body div#devskin7405315 .text ol { list-style-type:decimal; margin:10px 20px; padding:0px; } body div#devskin7405315 .text ul { list-style-image:url('https://dl.dropbox.com/u/22307794/css/img_li.gif'); margin:10px 20px; padding:0px; } body div#devskin7405315 .text li { margin:5px 0px; } body div#devskin7405315 .text hr { background:url(https://i451.photobucket.com/albums/qq231/pica-ae/img_sidebar_hr.gif) repeat-x left; margin:0px; padding:0px; border:none; } body div#devskin7405315 .text em { } body div#devskin7405315 .text strong { color:#4a5d4e; font-size:150%; } body div#devskin7405315 .text .bu { font-size:11px; max-width:70%; margin:0 auto; } body div#devskin7405315 .shadow-holder { background:white; box-shadow:0px 1px 4px #b2b2b2; -moz-box-shadow:0px 1px 4px #b2b2b2; -webkit-box-shadow:0px 1px 4px #b2b2b2; margin:5px; padding:0px; vertical-align:middle; transition:background 0.5s ease; -moz-transition:background 0.5s ease; -webkit-transition:background 0.5s ease; -ms-transition:background 0.5s ease; -o-transition:background 0.5s ease; } body div#devskin7405315 .shadow-holder .mild .thumb img { padding:0px; vertical-align:middle; transition:opacity 0.5s ease; -moz-transition:opacity 0.5s ease; -webkit-transition:opacity 0.5s ease; -ms-transition:opacity 0.5s ease; -o-transition:opacity 0.5s ease; } body div#devskin7405315 .shadow-holder:hover { background:#f2f2f2; } body div#devskin7405315 .shadow-holder .mild .thumb img:hover { } /* ------------------------------ BOTTOM ------------------------------ */ body div#devskin7405315 .bottom { background:#4a5d4e; margin:0px; padding:20px; } body div#devskin7405315 .bottom a { color:#ffffff; text-decoration:none; text-shadow:#37413e 0px -1px 0px; } body div#devskin7405315 .bottom a:hover { color:#798e7f; text-shadow:#37413e 0px 1px 0px; text-decoration:none; } /* ------------------------------ FOOTER ------------------------------ */ body div#devskin7405315 .footer { background:#e5e5e5; line-height:30px; margin:0px; padding:20px; text-shadow:none; text-align:center; } body div#devskin7405315 .footer h1 { } body div#devskin7405315 .footer a { background:#98ab0a; color:#FFFFFF; font-weight:normal; margin:2px 0; padding:0px 10px; display:inline-block; height:30px; line-height:30px; transition:background 1s ease; -moz-transition:background 1s ease; -webkit-transition:background 1s ease; -ms-transition:background 1s ease; -o-transition:background 1s ease; } body div#devskin7405315 .footer a:hover { background:#FFFFFF; color:#98ab0a; } body div#devskin7405315 .suggestion { background:#ffffff; color:#333333; font-size:14px; padding:20px; } body div#devskin7405315 .suggestion h3 { text-align:center; } /* ------------------------------ DEVIATIONS ------------------------------ */ body div#devskin7405315 a.embedded-deviation { transition:opacity 0.5s ease; -moz-transition:opacity 0.5s ease; -webkit-transition:opacity 0.5s ease; -ms-transition:opacity 0.5s ease; -o-transition:opacity 0.5s ease; } body div#devskin7405315 a.embedded-deviation:hover { } body div#devskin7405315 a.embedded-deviation .iframe .deviantart .bubbleview .journal-wrapper .journal-wrapper2 , body div#devskin7405315 journal .journalcontrol .negate-box-margin .gr-box .gr-top { display:none; } /* ------------------------------ COLUMNS ------------------------------ */ body div#devskin7405315 .columns { display:inline-block; width:100%; height:100%; } body div#devskin7405315 .columns p, body div#devskin7405315 .columns .half { width:50%; display:block; float:left; padding-right:10px; } body div#devskin7405315 .left-half { height:300px; width:40%; float:left; padding-right:10px; } body div#devskin7405315 .right-half { width:50%; text-align:right; float:right; display:block; } body div#devskin7405315 .specs { background:#e5e5e5; padding:10px; text-shadow:none; } body div#devskin7405315 .right-half .shadow-holder { background:#f2f2f2; border:none; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; box-shadow:0px 1px 4px #b2b2b2; -moz-box-shadow:0px 1px 4px #b2b2b2; -webkit-box-shadow:0px 1px 4px #b2b2b2; margin:0; padding:0; vertical-align:middle; } body div#devskin7405315 .right-half .shadow-holder .shadow { } body div#devskin7405315 .right-half .shadow-holder .shadow a.thumb.lit { height:240px; width:320px; border-radius:10px 10px 0 0; -moz-border-radius:10px 10px 0 0; -webkit-border-radius:10px 10px 0 0; } body div#devskin7405315 .right-half .shadow-holder .shadow a.thumb.lit img { display:none; } body div#devskin7405315 .right-half .shadow-holder a.thumb.lit .wrap q { } body div#devskin7405315 .right-half .shadow-holder a.thumb.lit .wrap q { font-size:13px; line-height:20px; margin:0; padding:20px; position:absolute; right:0; left:0; } body div#devskin7405315 .right-half .shadow-holder a.thumb.lit .wrap q strong { display:block; background:#4a5d4e; color:#98ab0a; text-shadow:#37413e 0px 1px 0px; font-weight:normal; font-size:16px; margin:-20px; margin-bottom:10px; padding:20px; transition:color 0.5s, box-shadow 0.5s; -moz-transition:color 0.5s, box-shadow 0.5s; -webkit-transition:color 0.5s, box-shadow 0.5s; -ms-transition:color 0.5s, box-shadow 0.5s; -o-transition:color 0.5s, box-shadow 0.5s; } body div#devskin7405315 .right-half .shadow-holder:hover { background:#FFFFFF; } body div#devskin7405315 .right-half .shadow-holder:hover a.thumb.lit .wrap q strong { color:#b4cc00; text-shadow:#37413e 0px 2px 1px; } /* ------------------------------ BUTTONS ------------------------------ */ body div#devskin7405315 .button a { background:#98ab0a url('https://dl.dropboxusercontent.com/u/22307794/css/tricks/icon-journal.png') center no-repeat; background-position:10px; box-shadow:0px 1px 4px #b2b2b2; -moz-box-shadow:0px 1px 4px #b2b2b2; -webkit-box-shadow:0px 1px 4px #b2b2b2; color:#ffffff; font-weight:normal; font-size:16px; padding:10px 12px 10px 36px; text-shadow:#6b7807 0px -1px 0px; } body div#devskin7405315 .button a:hover { background:#a5b90f url('https://dl.dropboxusercontent.com/u/22307794/css/tricks/icon-journal-hover.png') center left no-repeat; background-position:10px; color:#6b7807; text-shadow:#b6c54d 0px 1px 0px; } /* ------------------------------ BOXES ------------------------------ */ body div#devskin7405315 .tip, body div#devskin7405315 .tip-small { background:#f7e37c; box-shadow:0px 1px 4px #b2b2b2; -moz-box-shadow:0px 1px 4px #b2b2b2; -webkit-box-shadow:0px 1px 4px #b2b2b2; color:#404040; font-family:'Inconsolata', monospace; font-size:14px; padding:20px 20px 20px 50px; text-shadow:#fbf1be 0px 1px 0px; } body div#devskin7405315 .tip b { margin-left:-30px; } body div#devskin7405315 .tip strong { color:#404040; font-size:14px; } body div#devskin7405315 .tip i, body div#devskin7405315 .tip em { font-style:normal; } body div#devskin7405315 .tip i { color:#e5004d; } body div#devskin7405315 .tip em { color:#1717e5; } body div#devskin7405315 .tip u { background:#1717e5; color:#FFFFFF; text-decoration:none; padding:0 2px; text-shadow:none; } body div#devskin7405315 .tip-small { box-shadow:1px 1px 1px #b2b2b2; -moz-box-shadow:1px 1px 1px #b2b2b2; -webkit-box-shadow:1px 1px 1px #b2b2b2; display:inline-block; font-size:12px; margin-left:8px; padding:2px 4px; position:relative; top:-2px; float:right; text-align:right; z-index:10; } body div#devskin7405315 .tip-small::before { content:' '; border-top:solid 8px transparent; border-bottom:solid 8px transparent; border-right:solid 8px #f7e37c; position:absolute; left:-8px; top:4px; } body div#devskin7405315 .tip-small i { opacity:0; filter:alpha(opacity=0); _zoom:1; transition:opacity 0.5s ease; -moz-transition:opacity 0.5s ease; -webkit-transition:opacity 0.5s ease; -ms-transition:opacity 0.5s ease; -o-transition:opacity 0.5s ease; display:block; float:left; position:absolute; background:#f7e37c; font-size:0; right:-20px; bottom:0px; left:-900px; top:0px; } body div#devskin7405315 .tip-small:hover i { opacity:0.5; filter:alpha(opacity=50); _zoom:1; } body div#devskin7405315 .attention { background:#4a5d4e; color:#FFFFFF; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; box-shadow:0px 1px 4px #b2b2b2; -moz-box-shadow:0px 1px 4px #b2b2b2; -webkit-box-shadow:0px 1px 4px #b2b2b2; padding:20px; text-shadow:#000000 0px -1px 0px; font-size:14px; } body div#devskin7405315 .attention a:hover { color:#FFFFFF; } /* ------------------------------ PRO AND CONS ------------------------------ */ body div#devskin7405315 .procon { display:inline!important; } body div#devskin7405315 .pro, body div#devskin7405315 .con { display:inline; float:left; width:50%; } body div#devskin7405315 .text .procon .pro ul { list-style-image:url('https://dl.dropbox.com/u/22307794/css/img_li_plus.gif'); margin:10px 20px; padding:0px; } body div#devskin7405315 .text .procon .con ul { list-style-image:url('https://dl.dropbox.com/u/22307794/css/img_li_minus.gif'); margin:10px 20px; padding:0px; } /* ------------------------------ MOBILE ------------------------------ */ @media only screen and (max-width: 767px) { body div#devskin7405315 .footer a { margin:4px 0; display:block; } } /* ------------------------------ CODE EXAMPLES ------------------------------ */ body div#devskin7405315 .text blockquote { margin:0px; padding:24px 20px 15px 20px; color:#333333; font-family:monospace; font-size:12px; border:none; background:url(https://i451.photobucket.com/albums/qq231/pica-ae/img_blockquote.gif) #ffffff; box-shadow:0px 1px 4px #b2b2b2; -moz-box-shadow:0px 1px 4px #b2b2b2; -webkit-box-shadow:0px 1px 4px #b2b2b2; text-shadow:none; position:relative; overflow:hidden; } body div#devskin7405315 .text blockquote span { color:#1717e5; } body div#devskin7405315 .text blockquote p { margin:0px; padding:0px 20px; } body div#devskin7405315 .text blockquote p span { color:#e5004d; } body div#devskin7405315 .text blockquote i { color:#338033; font-style:normal; } body div#devskin7405315 .images { text-align:center; } body div#devskin7405315 .images img { box-shadow:0px 1px 4px #b2b2b2; -moz-box-shadow:0px 1px 4px #b2b2b2; -webkit-box-shadow:0px 1px 4px #b2b2b2; margin:5px; } /* ------------------------------ CODE EXAMPLE BOXES ------------------------------ */ body div#devskin7405315 .da-box { border:1px solid #a6b3a6; background:#dae4d9; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:20px; font-family:Verdana; text-shadow:none; } body div#devskin7405315 .da-box h1, body div#devskin7405315 .da-box h2, body div#devskin7405315 .da-box h3, body div#devskin7405315 .da-box h4, body div#devskin7405315 .da-box h5, body div#devskin7405315 .da-box h6 { font-family:Verdana; } body div#devskin7405315 .da-box h1 { font-size:24px; } body div#devskin7405315 .da-box h2 { font-size:18px; } body div#devskin7405315 .da-box h3 { font-size:14px; } body div#devskin7405315 .da-box h4 { font-size:12px; } body div#devskin7405315 .da-box h5 { font-size:10px; } body div#devskin7405315 .da-box h6 { font-size:8px; } body div#devskin7405315 .da-box ul, body div#devskin7405315 .da-box ol { list-style-image:none; list-style-position:outside; margin:0 20px; padding:0; } body div#devskin7405315 .da-box p { display:block; margin:10px 0; } body div#devskin7405315 .da-box blockquote { margin:1em 0 1em 1em; padding:0.6em; border-left:5px solid #aaa; background:transparent; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; font-family:Verdana; } body div#devskin7405315 .da-box a { color:#337287; font-weight:normal; text-shadow:none; } body div#devskin7405315 .custom-box { margin:auto; max-width:400px!important; background:#664d80; color:#ffffff; padding:20px; text-shadow:none; } /* -- Background Images -- */ body div#devskin7405315 .tiffany1, body div#devskin7405315 .tiffany2, body div#devskin7405315 .tiffany3 { padding:20px; margin:0 40px; text-shadow:none; } body div#devskin7405315 .tiffany1 { background-image:url('https://dl.dropbox.com/u/22307794/css/tricks/372031.png'); } body div#devskin7405315 .tiffany2 { background-color:#bde6d8; background-image:url('https://dl.dropbox.com/u/22307794/css/tricks/372031.png'); background-position:center; background-repeat:no-repeat; background-attachment:scroll; } body div#devskin7405315 .tiffany3 { background:#bde6d8 url('https://dl.dropbox.com/u/22307794/css/tricks/372031.png') center no-repeat scroll; } body div#devskin7405315 .imagepractice { display:inline-block; margin:20px 0px; } body div#devskin7405315 .imagepractice1, body div#devskin7405315 .imagepractice2, body div#devskin7405315 .imagepractice3, body div#devskin7405315 .imagepractice4, body div#devskin7405315 .imagepractice5, body div#devskin7405315 .imagepractice6 { background:#3d5266; padding:20px; margin:0 40px 0 0; text-shadow:none; color:#ffffff; float:left; max-width:45%; } body div#devskin7405315 .imagepractice1 { background:url('https://dl.dropbox.com/u/22307794/css/tricks/busy_image.png') top; } body div#devskin7405315 .imagepractice2 { background:url('https://dl.dropbox.com/u/22307794/css/tricks/busy_pattern.png') top; } body div#devskin7405315 .imagepractice3 { background:url('https://dl.dropbox.com/u/22307794/css/tricks/hardedge_gradient.png') top no-repeat #3d5266; } body div#devskin7405315 .imagepractice4 { background:url('https://dl.dropbox.com/u/22307794/css/tricks/texture_image.png') top no-repeat #3d5266; } body div#devskin7405315 .imagepractice5 { background:url('https://dl.dropbox.com/u/22307794/css/tricks/subtle_pattern.png'); } body div#devskin7405315 .imagepractice6 { background:url('https://dl.dropbox.com/u/22307794/css/tricks/softedge_gradient.png') top no-repeat #3d5266; } body div#devskin7405315 .welcome { background:#EFE7E1 url('https://dl.dropbox.com/u/22307794/css/tricks/welcome.png') no-repeat; background-position:center 20px; max-width:400px; margin:auto; padding:90px 20px 20px 20px; text-shadow:none; } body div#devskin7405315 .hlimage { background:#EFE7E1; max-width:400px; margin:auto; padding:20px; text-shadow:none; } body div#devskin7405315 .hlimage h1 { color:#332115; background:url('https://dl.dropbox.com/u/22307794/css/tricks/hlimage.png') center left no-repeat; font-family:'Alegreya', Georgia, Serif; padding:0 0 0 30px; } /* -- Fonts -- */ body div#devskin7405315 .websafefonts { background:deepskyblue url('https://dl.dropbox.com/u/22307794/css/tricks/websafefonts.jpg') no-repeat; box-shadow:0px 1px 4px #b2b2b2; -moz-box-shadow:0px 1px 4px #b2b2b2; -webkit-box-shadow:0px 1px 4px #b2b2b2; color:#ffffff; font-size:20px; line-height:30px; padding:20px 20px 20px 50%; text-shadow:none; } body div#devskin7405315 .font-arial { font-family:Arial; } body div#devskin7405315 .font-arial-black { font-family:Arial Black; } body div#devskin7405315 .font-courier-new { font-family:Courier New; } body div#devskin7405315 .font-georgia { font-family:Georgia; } body div#devskin7405315 .font-impact { font-family:Impact; } body div#devskin7405315 .font-lucida-grande { font-family:Lucida Grande; } body div#devskin7405315 .font-tahoma { font-family:Tahoma; } body div#devskin7405315 .font-times-new-roman { font-family:Times New Roman; } body div#devskin7405315 .font-trebuchet-ms { font-family:Trebucht MS; } body div#devskin7405315 .font-verdana { font-family:Verdana; } body div#devskin7405315 .fonthierarchy1 { font-family:'Rufina', Georgia, Serif; font-size:18px; padding:10px 0; } body div#devskin7405315 .fonthierarchy2 { font-family:Georgia, Serif; font-size:18px; padding:10px 0; } body div#devskin7405315 .fonthierarchy3 { font-family:Serif; font-size:18px; padding:10px 0; } body div#devskin7405315 .fonthierarchy4 { font-family:Times New Roman; font-size:18px; padding:10px 0; } body div#devskin7405315 .sans-serif { font-family:sans-serif; font-size:18px; } body div#devskin7405315 .serif { font-family:serif; font-size:18px; } body div#devskin7405315 .fantasy { font-family:fantasy; font-size:18px; } body div#devskin7405315 .cursive { font-family:cursive; font-size:18px; } body div#devskin7405315 .monospace { font-family:monospace; font-size:18px; } body div#devskin7405315 .fonts-text { padding:20px; text-shadow:none; background:#664d80; color:#ffffff; font-family:'Josefin Sans', Sans-serif; font-size:16px; font-weight:400; line-height:25px; } body div#devskin7405315 .fonts-text h1 { color:#ffffff; font-family:'Josefin Sans', Sans-serif; font-size:24px; font-style:italic; font-weight:100; letter-spacing:5px; text-align:right; text-transform:capitalize; } body div#devskin7405315 .fonts-text h2 { color:#ffffff; font-family:'Josefin Sans', Sans-serif; font-size:18px; font-weight:700; letter-spacing:-1px; text-decoration:underline; text-transform:uppercase; } /* -- Lists -- */ body div#devskin7405315 .list1, body div#devskin7405315 .list2, body div#devskin7405315 .list3, body div#devskin7405315 .list4 { background:#EFE7E1; color:#332115; max-width:400px; margin:auto; padding:20px 40px; text-shadow:none; } body div#devskin7405315 .list1 ul { padding:0; margin:0; list-style-type:circle; list-style-image:none; list-style-position:inside; } body div#devskin7405315 .list2 ol { padding:0; margin:0; list-style-type:upper-roman; list-style-image:none; list-style-position:outside; } body div#devskin7405315 .list3 ol { padding:0; margin:0 0 0 20px; list-style-type:lower-latin; list-style-image:none; list-style-position:outside; } body div#devskin7405315 .list4 ul { padding:0; margin:0; list-style-type:none; list-style-image:url('https://dl.dropboxusercontent.com/u/22307794/css/tricks/list4_ul_img.png'); list-style-position:inside; } body div#devskin7405315 .listmenu, body div#devskin7405315 .listmenu a { text-shadow:none; margin:0px!important; padding:0px!important; } body div#devskin7405315 .listmenu ul { margin:0px; padding:0px; list-style:none; background:#ffffff; text-align:center; height:30px; } body div#devskin7405315 .listmenu ul li { display:inline-block; position:relative; margin:0px; padding:0px; } body div#devskin7405315 .listmenu li ul { position:absolute; left:0px; top:30px; display:none; margin:0px; padding:0px; } body div#devskin7405315 .listmenu ul li a { display:block; text-decoration:none; color:#fff; background:#17c3e5; height:30px; width:120px; text-align:center; line-height:30px; margin:0px; padding:0px; } body div#devskin7405315 .listmenu ul li a:hover { background:#369eb3; color:#fff; } body div#devskin7405315 .listmenu li:hover ul { display:block; } /* -- Before & After -- */ body div#devskin7405315 .da-box .i-ba { display:inline-block; } body div#devskin7405315 .da-box .i-ba:before, body div#devskin7405315 .da-box .i-ba:after { font-family:sans-serif; } body div#devskin7405315 .da-box .i-ba:before { content:' '; background:url('https://dl.dropboxusercontent.com/u/22307794/css/tricks/guillemets-before.png') no-repeat; display:inline-block; height:6px; width:8px; } body div#devskin7405315 .da-box .i-ba:after { content:' '; background:url('https://dl.dropboxusercontent.com/u/22307794/css/tricks/guillemets-after.png') no-repeat; display:inline-block; height:6px; width:8px; } body div#devskin7405315 .da-box .ba-list, body div#devskin7405315 .da-box .ba-image { margin:0; padding:0; } body div#devskin7405315 .da-box .ba-image h1 { color:#2864ff; font-size:18px; font-weight:bold; } body div#devskin7405315 .da-box .ba-image h1::before { content:' '; display:inline-block; background:url('https://dl.dropboxusercontent.com/u/22307794/css/tricks/ba_image_cat_before.png') no-repeat; height:20px; width:12px; margin:0 4px -3px 0; padding:0; } body div#devskin7405315 .da-box .ba-image h1::after { content:' '; display:inline-block; background:url('https://dl.dropboxusercontent.com/u/22307794/css/tricks/ba_image_cat_after.png') no-repeat; height:20px; width:12px; margin:0 0 -3px 4px; padding:0; } body div#devskin7405315 .da-box .ba-list ul { list-style-type:none; margin-left:14px; } body div#devskin7405315 .da-box .ba-list ul li::before { content:' '; display:block; float:left; background:#2864ff; height:8px; width:8px; margin:6px 6px 0 -14px; } body div#devskin7405315 .da-box .ba-arrow .button a { background:#2864FF; color:#FFFFFF; display:inline-block; height:40px; line-height:40px; padding:0 10px 0 10px; position:relative; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; } body div#devskin7405315 .da-box .ba-arrow .button a::after { content:' '; background:transparent; border-top:solid transparent 20px; border-right:none; border-bottom:solid transparent 20px; border-left:solid #2864FF 20px; position:absolute; right:-20px; } body div#devskin7405315 .da-box .ba-arrow .button a:hover { background:#183d99; text-shadow:none; } body div#devskin7405315 .da-box .ba-arrow .button a:hover::after { border-left:solid #183d99 20px; } /* -- Shapes -- */ body div#devskin7405315 .no-box { background:transparent; text-shadow:none; } body div#devskin7405315 .no-box .shapes { position:relative; } body div#devskin7405315 .no-box .shapes .square, body div#devskin7405315 .no-box .shapes .rectangle, body div#devskin7405315 .no-box .shapes .rounded, body div#devskin7405315 .no-box .shapes .circle, body div#devskin7405315 .no-box .shapes .oval, body div#devskin7405315 .no-box .shapes .triangle, body div#devskin7405315 .no-box .shapes .candy, body div#devskin7405315 .no-box .shapes .diamond, body div#devskin7405315 .no-box .shapes .star8, body div#devskin7405315 .no-box .shapes .star12, body div#devskin7405315 .no-box .shapes .asterisk, body div#devskin7405315 .no-box .shapes .star6, body div#devskin7405315 .no-box .shapes .crescent-moon, body div#devskin7405315 .no-box .shapes .heart, body div#devskin7405315 .no-box .shapes .hexagon { background:MediumVioletRed; margin:0 auto; } body div#devskin7405315 .no-box .shapes .square { height:100px; width:100px; } body div#devskin7405315 .no-box .shapes .rectangle { height:100px; width:300px; } body div#devskin7405315 .no-box .shapes .rounded { border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; height:100px; width:300px; } body div#devskin7405315 .no-box .shapes .circle { border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px; height:100px; width:100px; } body div#devskin7405315 .no-box .shapes .oval { border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; height:100px; width:300px; } body div#devskin7405315 .no-box .shapes .trapezoid { background:none; border-top:none; border-right:100px solid transparent; border-bottom:100px solid MediumVioletRed; border-left:50px solid transparent; width:100px; position:relative; left:200px; } body div#devskin7405315 .no-box .shapes .triangle { background:none; border-top:none; border-right:100px solid transparent; border-bottom:100px solid MediumVioletRed; border-left:100px solid transparent; display:inline-block; position:relative; left:200px; } body div#devskin7405315 .no-box .shapes .candy { height:50px; width:50px; position:relative; } body div#devskin7405315 .no-box .shapes .candy::before { content:' '; border-top:25px solid transparent; border-right:25px solid MediumVioletRed; border-bottom:25px solid transparent; border-left:25px solid MediumVioletRed; position:absolute; left:-50px; } body div#devskin7405315 .no-box .shapes .candy::after { content:' '; border-top:25px solid transparent; border-right:25px solid MediumVioletRed; border-bottom:25px solid transparent; border-left:25px solid MediumVioletRed; position:absolute; right:-50px; } body div#devskin7405315 .no-box .shapes .diamond { height:100px; width:100px; transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); } body div#devskin7405315 .no-box .shapes .star8 { height:100px; width:100px; } body div#devskin7405315 .no-box .shapes .star8::before { content:' '; display:block; background:MediumVioletRed; height:100px; width:100px; transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); } body div#devskin7405315 .no-box .shapes .star12 { height:100px; width:100px; position:relative; } body div#devskin7405315 .no-box .shapes .star12::before { content:' '; display:block; background:MediumVioletRed; height:100px; width:100px; transform:rotate(30deg); -moz-transform:rotate(30deg); -webkit-transform:rotate(30deg); -ms-transform:rotate(30deg); -o-transform:rotate(30deg); } body div#devskin7405315 .no-box .shapes .star12::after { content:' '; display:block; position:absolute; top:0; background:MediumVioletRed; height:100px; width:100px; transform:rotate(-30deg); -moz-transform:rotate(-30deg); -webkit-transform:rotate(-30deg); -ms-transform:rotate(-30deg); -o-transform:rotate(-30deg); } body div#devskin7405315 .no-box .shapes .slices { background:transparent; display:block; position:relative; left:240px; height:220px; overflow:hidden; } body div#devskin7405315 .no-box .shapes .slices .slice1, body div#devskin7405315 .no-box .shapes .slices .slice2, body div#devskin7405315 .no-box .shapes .slices .slice3, body div#devskin7405315 .no-box .shapes .slices .slice4 { height:100px; width:100px; display:inline-block; position:absolute; } body div#devskin7405315 .no-box .shapes .slices .slice1 { background:MediumVioletRed; border-radius:100px 0 0 0; -moz-border-radius:100px 0 0 0; -webkit-border-radius:100px 0 0 0; top:0; left:0; } body div#devskin7405315 .no-box .shapes .slices .slice2 { background:#7717e5; border-radius:0 100px 0 0; -moz-border-radius:0 100px 0 0; -webkit-border-radius:0 100px 0 0; top:0px; left:100px; } body div#devskin7405315 .no-box .shapes .slices .slice3 { background:#17aee5; border-radius:0 0 100px 0; -moz-border-radius:0 0 100px 0; -webkit-border-radius:0 0 100px 0; top:110px; left:110px; } body div#devskin7405315 .no-box .shapes .slices .slice4 { background:#17e525; border-radius:0 0 0 100px; -moz-border-radius:0 0 0 100px; -webkit-border-radius:0 0 0 100px; top:100px; left:0; } body div#devskin7405315 .no-box .shapes .asterisk { height:100px; width:20px; position:relative; } body div#devskin7405315 .no-box .shapes .asterisk::before { content:' '; display:block; background:MediumVioletRed; height:100px; width:20px; transform:rotate(60deg); -moz-transform:rotate(60deg); -webkit-transform:rotate(60deg); -ms-transform:rotate(60deg); -o-transform:rotate(60deg); } body div#devskin7405315 .no-box .shapes .asterisk::after { content:' '; display:block; position:absolute; top:0; background:MediumVioletRed; height:100px; width:20px; transform:rotate(-60deg); -moz-transform:rotate(-60deg); -webkit-transform:rotate(-60deg); -ms-transform:rotate(-60deg); -o-transform:rotate(-60deg); } body div#devskin7405315 .no-box .shapes .star6 { background:transparent; border-top:none; border-right:40px solid transparent; border-bottom:65px solid MediumVioletRed; border-left:40px solid transparent; display:inline-block; position:relative; left:260px; } body div#devskin7405315 .no-box .shapes .star6::before { content:' '; background:transparent; border-bottom:none; border-right:40px solid transparent; border-top:65px solid MediumVioletRed; border-left:40px solid transparent; display:block; position:absolute; top:20px; left:-40px; } body div#devskin7405315 .no-box .shapes .crescent-moon { border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px; height:100px; width:100px; position:relative; transform:rotate(-30deg); -moz-transform:rotate(-30deg); -webkit-transform:rotate(-30deg); -ms-transform:rotate(-30deg); -o-transform:rotate(-30deg); } body div#devskin7405315 .no-box .shapes .crescent-moon::after { content:' '; background:url(https://i451.photobucket.com/albums/qq231/pica-ae/img_background.jpg) #f2f2f2; border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px; display:inline-block; height:100px; width:100px; position:absolute; right:-20px; } body div#devskin7405315 .no-box .shapes .heart { background:MediumVioletRed; position:relative; height:80px; width:80px; transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); border-bottom-right-radius:5px; -moz-border-bottom-right-radius:5px; -webkit-border-bottom-right-radius:5px; } body div#devskin7405315 .no-box .shapes .heart::before, body div#devskin7405315 .heart::after { background:MediumVioletRed; width:80px; height:80px; border-radius:40px; -moz-border-radius:40px; -webkit-border-radius:40px; position:absolute; } body div#devskin7405315 .no-box .shapes .heart::before { content:' '; left:-40px; } body div#devskin7405315 .no-box .shapes .heart::after { content:' '; top:-40px; } body div#devskin7405315 .no-box .shapes .hexagon { height:100px; width:60px; position:relative; } body div#devskin7405315 .no-box .shapes .hexagon::before { content:' '; border-top:50px solid transparent; border-right:30px solid MediumVioletRed; border-bottom:50px solid transparent; position:absolute; left:-30px; } body div#devskin7405315 .no-box .shapes .hexagon::after { content:' '; border-top:50px solid transparent; border-bottom:50px solid transparent; border-left:30px solid MediumVioletRed; position:absolute; right:-30px; } body div#devskin7405315 .attention .border-frame { background:white; height:100px; width:200px; margin:0 auto; border-top:10px solid blue; border-right:10px solid red; border-bottom:10px solid yellow; border-left:10px solid green; } /* -- Journal break-down Part II - thumbs -- */ body div#devskin7405315 .thumb-structure, body div#devskin7405315 .thumb-default, body div#devskin7405315 .thumb-styled { text-align:center; } body div#devskin7405315 .thumb-structure .shadow-holder, body div#devskin7405315 .thumb-structure .shadow-holder .shadow, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb img, body div#devskin7405315 .thumb-structure a.embedded-deviation, body div#devskin7405315 .thumb-structure a.embedded-deviation img, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb img.lit, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb wrap, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb .wrap q, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb .wrap q strong { background:transparent; border:1px solid #a6b3a6; font-family:'Inconsolata', monospace; font-size:11px; margin:20px!important; padding:0; position:relative; } body div#devskin7405315 .thumb-structure .shadow-holder { box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow { } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb { display:block; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb img { } body div#devskin7405315 .thumb-structure a.embedded-deviation { } body div#devskin7405315 .thumb-structure a.embedded-deviation img { width:93%; float:left; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb.lit { width:350px; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb img.lit { } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb wrap { } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb .wrap q { display:block; font-family:Verdana; padding:0 0 0 20px; width:280px; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb .wrap q strong { display:block; font-family:Verdana; font-weight:normal; margin:20px 10px 10px 0!important; padding:10px; } body div#devskin7405315 .thumb-structure .shadow-holder::before, body div#devskin7405315 .thumb-structure .shadow-holder .shadow::before, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb::before, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb img::before, body div#devskin7405315 .thumb-structure a.embedded-deviation::before, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb wrap::before, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb .wrap q::before, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb .wrap q strong::before, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb.lit::before { background:#1717e5; color:#FFFFFF; height:16px; line-height:16px; padding:0 2px; position:absolute; top:2px; left:2px; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb::after, body div#devskin7405315 .thumb-structure a.embedded-deviation::after { background:#1717e5; color:#FFFFFF; height:16px; line-height:16px; padding:0 2px; position:absolute; top:22px; left:22px; } body div#devskin7405315 .thumb-structure .shadow-holder::before { content:'.shadow-holder'; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow::before { content:'.shadow'; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb::before { content:'a.thumb'; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb::after { content:'img'; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb img::before { content:'img'; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb.lit::before { content:'a.thumb.lit'; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb wrap::before { content:'wrap'; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb .wrap q::before { content:'q'; font-family:'Inconsolata', monospace; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb .wrap q strong::before { content:'strong'; font-family:'Inconsolata', monospace; } body div#devskin7405315 .thumb-structure a.embedded-deviation::before { content:'a.embedded-deviation'; } body div#devskin7405315 .thumb-structure a.embedded-deviation::after { content:'img'; } body div#devskin7405315 .thumb-default .shadow-holder { background:transparent; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; display:inline-block; margin:0; padding:0; vertical-align:baseline; } body div#devskin7405315 .thumb-default .shadow-holder .shadow { background:transparent; background-position:center center; background-repeat:no-repeat; display:block; padding:3px 4px 5px; text-align:center; } body div#devskin7405315 .thumb-default .shadow-holder .shadow a.thumb img { position:static !important; max-width:100%; vertical-align:baseline; } body div#devskin7405315 .thumb-default .shadow-holder .shadow a.thumb.lit { background:url('https://dl.dropboxusercontent.com/u/22307794/css/tricks/thumb-lit-bg.png') repeat-x; border:1px solid #FFFFFF; box-shadow:#c1c1c1 0px 1px 2px; -moz-box-shadow:#c1c1c1 0px 1px 2px; -webkit-box-shadow:#c1c1c1 0px 1px 2px; color:#222222 !important; display:inline-block; height:125px; margin:auto; overflow:hidden; position:relative !important; text-align:left; text-decoration:none !important; width:150px; } body div#devskin7405315 .thumb-default .shadow-holder .shadow a.thumb.lit img.lit { left:0 !important; position:absolute !important; top:0 !important; max-width:100%; vertical-align:baseline; } body div#devskin7405315 .thumb-default .shadow-holder .shadow a.lit img.journal { margin:4px 0 0 4px; } body div#devskin7405315 .thumb-default .shadow-holder .shadow a.thumb.lit wrap { display:block; } body div#devskin7405315 .thumb-default .shadow-holder .shadow a.thumb.lit .wrap q { cursor:pointer; font-family:Verdana; font-size:12px; left:26px; line-height:1.2em; min-height:0; padding-top:3px; position:absolute; right:4px; top:0; } body div#devskin7405315 .thumb-default .shadow-holder .shadow a.thumb.lit .wrap q strong:first-child { display:block; padding-bottom:6px; } body div#devskin7405315 .thumb-default .shadow-holder .shadow a.thumb.lit img:hover { opacity:1; filter:alpha(opacity=100); _zoom:1; } body div#devskin7405315 .thumb-styled .shadow-holder, body div#devskin7405315 .thumb-styled a.embedded-deviation { background:deepskyblue; border:1px solid powderblue; box-shadow:0px 1px 4px #526166; -moz-box-shadow:0px 1px 4px #526166; -webkit-box-shadow:0px 1px 4px #526166; margin:10px; padding:5px; vertical-align:middle; transition:all 0s; -moz-transition:all 0s; -webkit-transition:all 0s; -ms-transition:all 0s; -o-transition:all 0s; } body div#devskin7405315 .thumb-styled .shadow-holder .shadow { } body div#devskin7405315 .thumb-styled .shadow-holder .shadow a.thumb { } body div#devskin7405315 .thumb-styled .shadow-holder .shadow a.thumb img, body div#devskin7405315 .thumb-styled a.embedded-deviation img { vertical-align:middle; } body div#devskin7405315 .thumb-styled .shadow-holder:hover, body div#devskin7405315 .thumb-styled a.embedded-deviation:hover { background:steelblue; border:1px solid steelblue; box-shadow:0px 1px 8px #526166; -moz-box-shadow:0px 1px 8px #526166; -webkit-box-shadow:0px 1px 8px #526166; } body div#devskin7405315 .thumb-styled .shadow-holder .shadow a.thumb.lit { height:150px; width:200px; margin:-5px; } body div#devskin7405315 .thumb-styled .shadow-holder .shadow a.thumb.lit img { display:none; } body div#devskin7405315 .thumb-styled .shadow-holder .shadow a.thumb.lit .wrap { } body div#devskin7405315 .thumb-styled .shadow-holder .shadow a.thumb.lit .wrap q { color:#FFFFFF; font-family:Lato; font-size:13px; line-height:15px; margin:0; padding:5px; position:absolute; right:0; left:0; } body div#devskin7405315 .thumb-styled .shadow-holder .shadow a.thumb.lit .wrap q strong:first-child { display:block; background:powderblue; color:white; font-size:16px; line-height:20px; margin:-5px; padding:5px; margin-bottom:10px; } body div#devskin7405315 .thumb-styled .shadow-holder:hover .shadow a.thumb.lit .wrap q strong:first-child { background:steelblue; } /* -- Issues with sta.sh writer and preview -- */ body div#devskin7405315 .title-issue, body div#devskin7405315 .title-solved { background:white; margin:0 40px; padding-bottom:1px; } body div#devskin7405315 .title-issue .text, body div#devskin7405315 .title-solved .text { margin:40px; padding:0px; } body div#devskin7405315 .title-issue .title { margin:0; padding:0; position:relative; } body div#devskin7405315 .title-issue .title::before { display:block; content:'80px'; color:blue; border-bottom:1px solid; width:80px; text-shadow:none; position:absolute; top:40px; text-align:center; opacity:0.1; filter:alpha(opacity=10); _zoom:1; } body div#devskin7405315 .title-issue .title:hover::before { opacity:1; filter:alpha(opacity=100); _zoom:1; } body div#devskin7405315 .title-issue .title h2, body div#devskin7405315 .title-issue .title h2 a { background:url('https://fc07.deviantart.net/fs70/f/2015/044/4/c/swirl_pattern_edit_by_pica_ae-d8ht7p7.png'); color:teal; font-family:'Abril Fatface', cursive; font-size:24px; margin:0; padding:40px!important; text-shadow:dimgrey 0px 1px 0px; text-transform:uppercase; } body div#devskin7405315 .title-issue .title h2 a:hover { color:royalblue; } body div#devskin7405315 .title-solved .title h2 { background:url('https://fc07.deviantart.net/fs70/f/2015/044/4/c/swirl_pattern_edit_by_pica_ae-d8ht7p7.png'); padding:40px!important; } body div#devskin7405315 .title-solved .title h2, body div#devskin7405315 .title-solved .title h2 a { color:teal; font-family:'Abril Fatface', cursive; font-size:24px; text-shadow:dimgrey 0px 1px 0px; text-transform:uppercase; } body div#devskin7405315 .title-solved .title h2 a:hover { color:royalblue; } body div#devskin7405315 .title-solved .title { position:relative; } body div#devskin7405315 .title-solved .title::before { display:block; content:'40px'; color:blue; border-bottom:1px solid; width:40px; text-shadow:none; position:absolute; top:40px; text-align:center; opacity:0.1; filter:alpha(opacity=10); _zoom:1; } body div#devskin7405315 .title-solved .title:hover::before { opacity:1; filter:alpha(opacity=100); _zoom:1; } /* -- what is CSS and HTML anyway? -- */ body div#devskin7405315 .basics1, body div#devskin7405315 .basics2 { background:ivory; font-family:Roboto, Sans-serif; font-size:13px; margin:0; padding:20px; line-height:15px!important; text-shadow:none; } body div#devskin7405315 .basics1 h1, body div#devskin7405315 .basics1 h3, body div#devskin7405315 .basics2 h1, body div#devskin7405315 .basics2 h3 { color:crimson; font-family:Roboto, Sans-serif; } body div#devskin7405315 .basics h1 { font-size:24px; } body div#devskin7405315 .basics1 p, body div#devskin7405315 .basics2 p { color:dimgrey; } body div#devskin7405315 .basics1 h3, body div#devskin7405315 .basics2 h3 { color:limegreen; font-size:18px; margin-top:15px; } body div#devskin7405315 .basics2 .box { background:grey; margin-top:20px; padding:20px; } body div#devskin7405315 .basics2 .box h3 { color:deepskyblue; margin-top:0px; } body div#devskin7405315 .basics2 .box p { color:white; }

Today's CSS Trick will be about using background images in Journal Skins.

There are three types of images that are mostly used in journals skins: big background images, seamlessly repeatable patterns and icon/logo-like images.

Images can be used for all elements of a journal: in the header, footer, behind text, next to text etc.. Any journal element has the ability to contain an image

I cannot stress enough that the main objective of a journal is making written content enjoyable to read. It is all about readability and making it as easy for the reader as possible. Very often I come across pretty journal skins, that have a complete lack of readability. In one of my previous CSS Tricks I already mentioned the dangers of text lengths and how to limit the .text width to improve readability.



Problems with using images:

  • Despite being big an images turns out to be too small for a journal
  • An image does not repeat seamlessly
  • Text becomes non-readable on an image
  • Too big images slow down the loading time of a page

Let's look at how to add images first!
.gr-box {

background: url("http://…/pattern.png");


}

If you add an image just like this, it will automatically be repeated into all directions, starting from the top left corner of the element the background image is contained in. (While I am well aware of the fact that the image I choose for these examples is actually quite bad )

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.



But you have more options to control images
You can control the position of an image, where it is poisitioned, whether or not it repeats and how it repeats and how it behaves.

.gr-box {

background-color: #bde6d8 ;


background-image: url("http://…/pattern.png");


background-position: center;


background-repeat: no-repeat;


background-attachment: scroll;


}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam



You can also write this all onto the background element only. Which way you choose to write this, is up to you. For beginners, writing it all out, keeps the code easier to view and mistakes easier to detect. The more familiar you become with CSS, the more likely you are going to write everything in one line.

.gr-box {

background: #bde6d8 url("http://…/pattern.png") center no-repeat scroll;


}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.



What do those attributes stand for?

  • background-image is the easiest to understand, this one adds an image into the element.
  • background-position describes where, in dependency of the while element. top aligns to the top of the element, right to the right, left and bottom accordingly. center positions the image in the middle of the element. You can also use % and px data to align an image.
  • background-repeat controls how an image will be repeated. Not entering this line will automatically repeat your image into all directions; (leaving this out also makes background-position redundant). no-repeat stops this and makes the image appear only once in your element. repeat-x limits the repetition to the horizontal axis, repeat-y to the vertical.
  • background-attachment describes how the background image behaves upon scrolling the page. scroll is the normal behaviour of an image aka it will stay within its element and move along with that element; fixed will make the image stay at its same spot, despite its containing element moving upon scrolling.

Practical examples
In the first one we will have one image being one time centered at the top of an custom box. The image will be 20px from the top edge of the box; (a box's padding does not influence background images). Additionally the box needs padding at the top that in order for the text not to be above the image and by that impossible to read; the number 90px results from the images height (50px) + the 20px position from the top edge + 20px for where the text starts.

.welcome-box {

background: #EFE7E1 url("http://…/welcome.png") no-repeat;


background-postion: center 20px;


max-width: 400px;


margin: auto;


padding: 90px 20px 20px 20px;


}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.



You could also add a background image to headlines. This requires a non-repeating image, with additional padding for the text not to run over the image. The center value in combination with left will place the image at the left side of the headline, but centered vertically.

.h1 {

color: #332115;


background: url("http://…/welcome.png") center left no-repeat;


font-family: 'Alegreya', Georgia, Serif;


padding: 0 0 0 30px;


}

Lorem ipsum dolor sit amet
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.



Why I don't like to use
Using CSS to control the appearance of elements in a journal keep your HTML cleaner and more structured. This helps a lot when you need to edit something you have written. If you need to replace an image, it is often easier to find the URL in the CSS file, rather than the HTML.
This is even easier when you have the same image in more than one spot; instead of fixing each link, using background-image let's you use the same class more than once, but you only need to fix the image URL once.
Generally it is "good practice" to put as much information as possible into CSS files instead of HTML files. You may have to create more div classes, but you gain a better HTML result.

Best and Worst practice

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.


The text becomes almost impossible to read on this image. It is very busy and varies between bright and dark parts, which makes it hard to find a good color for the font.


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.


Again the text becomes almost impossible to read on this pattern. It is very busy, with many colors and makes it hard to not only read, but also look at the text. Not even mentioning finding a good color for the font…
This is a standard Photoshop pattern and you can actually see that it does not repeat seamless.


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.


This image of a gradient is not big enough to fill the whole box; a hard edge appears where it ends. But at least in this case, the text is good and easy to read.


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.


Stock images of textures, like dark and grainy I texture pack by northerndawn , add a nice touch to the background of the box, while it maintains readability. If you have an image editing program, you can colorize or adjust textures more to your liking. Having only one hue and brightness in the image also makes it easier to find a good text color.


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.


Subtle and seamless patterns, as f.e. provided by Subtle Patterns , keep text readable and add a nice subtle touch to an element.


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.


This gradient blends nicely into the background color of the element. It is not as bright as to disturb readability, but it adds a subtle effect to the box.



A short excurse to image file types

  • .JPG
    Good for busy images, good control over file size, risk of artefacts
  • .GIF
    Images with few colors, bad for gradients, limited transparencies, good control over file size
  • .PNG
    Good transparencies, little control over file size, no artefacts


In a nutshell
  • Pay attention to readability in your background-image choices, keep it subtle
  • Use seamlessly repeatable patterns
  • Prepare images in proper size
  • Use the best possible file type for your images
  • Control images via CSS, not via HTML


And now? Happy coding

And if you're looking for images… here's some help

Helpful Resources
Pattern Resources
Resources & Stock Images > Application Resources >Photoshop Patterns
Search for "Seamless Patterns" in Resources & Stock Images
Subtle Patterns | Free textures for your next web project
pattern8 | Download Free Repeat Patterns

Online Pattern Creators
Seamless Lite - Seamless Pattern Design by COLOURlovers
BgPatterns — Background Patterns Maker
Tartan Designer - Tartan Maker - Tartan Background pattern generator
Patternify | A CSS Pattern Generator

Tutorials and Resources for creating seamless Patterns
Seamless Patterns and How to Use Them With CSS by fantasy-alive
Seamless Textures in Photoshop by redheadstock
Repeating Pattern Tutorial l by Cpresti
Repeating Pattern Tutorial by PeriwinklePaisley
Simple Snowy Seamless Pattern Tutorial by ChewedKandi
Seamless Pattern Tutorial by ceanji
Free Action Pattern Generator by Giallo86

Textures
Browse Textures on deviantART
Mayang's Free Texture Library
Free Textures from TextureKing
[CG Textures] - Textures for 3D, graphic design and Photoshop!
Plaintextures - free high resolution textures for professionals.

Please pay attention to the Terms of Use of the provider! On dA just as well as from other sites. Not every site out there uses legitimate sources.

Have a suggestion?
Let me know in a comment or a note. I'd love to hear what you want to know and learn. With your input and suggestions this series can continue and grow.


Previous CSS Tricks
Limiting .text width Responsive dA? Background Images Article Layout Fonts and Text Basics Lists ::before and ::after Journal Breakdown Deviations in Journals

Related content

pica-ae - Happy Holidays!

[ TEXT ]


pica-ae - CSS Tricks: Journal title styling issue

pica-ae - My dA Transit Map [DD]

pica-ae - Advanced Moleskine Skin

pica-ae - Simple Moleskine Skin

pica-ae - Nobody's perfect.

pica-ae - Hot Chocolate Journal Skin

pica-ae - Don't Panic Skin

pica-ae - Red Moleskine Icons

pica-ae - Paperbag Icons

pica-ae - deviantART Moleskine Icons
Comments: 130

FrostxWatcher [2018-07-21 00:20:19 +0000 UTC]

what is css?


👍: 0 ⏩: 1

HazyGem In reply to FrostxWatcher [2018-07-27 02:04:28 +0000 UTC]

Something too complex

👍: 0 ⏩: 1

FrostxWatcher In reply to HazyGem [2018-07-27 18:52:09 +0000 UTC]

well I need to make a journal for a friend

👍: 0 ⏩: 1

HazyGem In reply to FrostxWatcher [2018-07-27 18:59:34 +0000 UTC]

k

👍: 0 ⏩: 0

Mangakido [2018-06-28 20:53:13 +0000 UTC]

I have a repeating pattern but when I use

.gr-box {

background: url("http://…/pattern.png");


}

it does this to all my images

img00.deviantart.net/c352/i/20…


It adds a white ball to the side? Does Deviant art Html still work properly?

👍: 0 ⏩: 0

mothiwalker [2018-05-11 01:10:48 +0000 UTC]

it doesnt work for me??

👍: 0 ⏩: 1

mothiwalker In reply to mothiwalker [2018-05-11 01:11:04 +0000 UTC]

elmclan goes reee.gr-box {
background: url("https://i.pinimg.com/originals/2b/d5/8e/2bd58ea17ed59b225e3e016ee43185df.png");
}
welcome to the ree dimension, daddy

👍: 0 ⏩: 0

KumaHontosha [2018-03-06 21:56:53 +0000 UTC]

You are right with images somewhat unless you use a subtle non-distracting pattern (which can be make to perfectly tile) in like a mild off-white with black text actually seems to improves the readability even further, and it's a bit more pleasing to the eye. This is actually similar to the reason that they recommend resume's (without the pattern) be put on on an off-white paper or resume paper if you can get it. It just makes it less stressful on the eyes to read in multiple lighting situations.

👍: 0 ⏩: 0

AlexisReitcher [2017-07-01 21:30:12 +0000 UTC]

I placed a background and this happened...
gyazo.com/e5af06622e87461eec8a…
The "general" is just a styled h2 tag, the other things are buttons.

👍: 0 ⏩: 0

KuriTails [2017-06-10 10:57:04 +0000 UTC]

Do I have to be premium?

👍: 0 ⏩: 0

Chaya-Alynna [2017-05-21 05:13:46 +0000 UTC]

my image is in stash and i tried using this, but it won't show - @

👍: 0 ⏩: 0

Lunnika-Horo [2016-08-08 15:22:36 +0000 UTC]

Sorry, I just don`t know who I can asked, but I want to change the usual "DeviantArt green" into colorful skins in different widgets on my profile and don`t know how. Can you please help me? Or maybe you know tutorial about it?

👍: 0 ⏩: 1

Lunnika-Horo In reply to Lunnika-Horo [2016-08-08 15:24:16 +0000 UTC]

Oh I found your answer to other user with similar problem ^^ Thanks)

👍: 0 ⏩: 1

pica-ae In reply to Lunnika-Horo [2016-08-08 23:47:11 +0000 UTC]

Alright, glad you found what you were looking for

👍: 0 ⏩: 0

DanksForTheMemeries [2016-07-20 21:14:07 +0000 UTC]

I typed it exactly as you have it, but it's transparent for some reason???

👍: 0 ⏩: 1

pica-ae In reply to DanksForTheMemeries [2016-07-20 22:37:08 +0000 UTC]

If you typed it exactly, I am afraid I have to ask whether you replaced the incomplete example url I used with your image url? 

👍: 0 ⏩: 1

DanksForTheMemeries In reply to pica-ae [2016-07-21 01:51:56 +0000 UTC]

I did... My url was from sta.sh, does that affect it at all?

👍: 0 ⏩: 1

pica-ae In reply to DanksForTheMemeries [2016-07-21 10:30:45 +0000 UTC]

It shouldn't. If you have a link to the skin (in a sta.sh document for example), I could have a look at it and see what went wrong.  

👍: 0 ⏩: 1

DanksForTheMemeries In reply to pica-ae [2016-07-22 17:30:18 +0000 UTC]

By the time I got around to checking my replies, I fixed the problem. But now I have a new one: I submitted it, and it says it won't become installable until I upload all the images I used. I uploaded the one I used as the header, and it still won't work. Do you know why this is and how to fix it?

👍: 0 ⏩: 1

pica-ae In reply to DanksForTheMemeries [2016-08-04 12:26:45 +0000 UTC]

Mh, sometimes there is a bug if the name of the file is different than in the CSS. But other than that, it should work as soon as all images are added.
It does not ask for a second image? I know there used to be a bug, when a skin didn't contain any images, but if there is one, it should work. 

👍: 0 ⏩: 0

EdgeLordess [2016-05-25 19:06:45 +0000 UTC]

Hi there, I tried following your tutorial but I'm not sure what I'm doing wrong. 

👍: 0 ⏩: 1

pica-ae In reply to EdgeLordess [2016-05-26 09:23:36 +0000 UTC]

Oh, it does not work on profile widgets. This is only for journal skins. 
If you want to edit the appearance of your profile page, you should check out CustomizeYourProfile . They have lots of tutorials and code for that  

👍: 0 ⏩: 0

catsins [2016-03-13 00:22:13 +0000 UTC]

i tried to make the journal background fixed and it won't show up?? where do i put "position: fixed;" ?? please help

👍: 0 ⏩: 0

catsins [2015-11-01 02:57:38 +0000 UTC]

I saw someone with a really cool journal skin, it had a fixed background (when scrolling, the image stays still while the content moves with the scrolling) and I was wondering how they did it? I'm not a core member but it would be cool to know c:

👍: 0 ⏩: 2

pica-ae In reply to catsins [2016-05-03 12:16:20 +0000 UTC]

They have probably used a fixed position for the image, you can read up a bit here developer.mozilla.org/en-US/do… or see how others coded it here codepen.io/search/pens?q=fixed…

👍: 0 ⏩: 1

catsins In reply to pica-ae [2016-05-03 19:25:13 +0000 UTC]

Ty!!

👍: 0 ⏩: 1

pica-ae In reply to catsins [2016-05-04 09:37:12 +0000 UTC]

No problem

👍: 0 ⏩: 0

catsins In reply to catsins [2015-11-01 02:58:52 +0000 UTC]

Nevermind, I figured it out ;u;

👍: 0 ⏩: 0

SecretAgentSuperstar [2015-08-17 11:06:44 +0000 UTC]

This guide was really helpful in how to insert and manipulate how images appear. The only issue I have is the position of the background image whenever it differs from how it looks in other pages. For instance, When I view the journal itself it looks like it's in the right position (Left/fixed). When I visit my profile, it looks like it is in the same position all the time no matter where I view it; Do you know how to fix this issue with a code? :/

👍: 0 ⏩: 1

pica-ae In reply to SecretAgentSuperstar [2016-05-03 12:08:07 +0000 UTC]

I am not sure about the problems with a fixed position, you may need to try using static instead. You can read up on it here developer.mozilla.org/en-US/do…
The problem may be, that it always refers the position to the whole browser, not the journal. So it can look different depending on where the journal is posted, like your profile, because it positions the background considering the whole page. 

👍: 0 ⏩: 0

silvsid [2015-07-15 23:35:14 +0000 UTC]

im sorry, but im just so confused. can someone please help me with this? Im so confused on where to put the image url and if i need to put other links and whatnot

👍: 0 ⏩: 1

pica-ae In reply to silvsid [2015-07-29 10:15:24 +0000 UTC]

Sorry for the late reply, I was in a mix of busy and sick lately.
The code for the background images would go in the CSS. You need to define which class should have a background image (for all the classes on DA you can use CSS Tricks: Skin Template )
I am afraid this tutorial is not for beginners, it requires a basic knowledge of CSS. I have not written a basic tutorial myself yet, so unfortunately I cannot link you to anything.

👍: 0 ⏩: 1

silvsid In reply to pica-ae [2015-07-31 00:44:50 +0000 UTC]

I understand, thank you for taking time out of your day to reply for me. I'll try to catch up on CSS tricks, but its a lovely tutorial.

👍: 0 ⏩: 1

pica-ae In reply to silvsid [2015-08-01 09:58:27 +0000 UTC]

Alright  

👍: 0 ⏩: 0

Nyssa-tan [2015-06-11 01:44:53 +0000 UTC]

Thank you very much for making and posting/sharing this! This will certainly be helpful to me in the future~

👍: 0 ⏩: 1

pica-ae In reply to Nyssa-tan [2015-07-08 11:14:58 +0000 UTC]

I am glad it is helpful  

👍: 0 ⏩: 0

TANblaque [2015-05-06 04:05:32 +0000 UTC]

Hello~ I really wonder how to put an image beside a text at the custom box.

👍: 0 ⏩: 2

pica-ae In reply to TANblaque [2015-06-08 08:23:00 +0000 UTC]

You may find an answer in this comment thread comments.deviantart.com/1/3478…

Or, use the tutorial Vane--Chan suggested  

I hope you can figure it out  

👍: 0 ⏩: 1

TANblaque In reply to pica-ae [2016-01-06 08:04:32 +0000 UTC]

Thank you so much!~!

👍: 0 ⏩: 0

Le-Vane In reply to TANblaque [2015-05-18 17:13:58 +0000 UTC]

Hiya! Don't mind me stalking the comments, but I had the same problem for a while.
Maybe this'll help you? CustomBox Columns tutorial

👍: 0 ⏩: 1

TANblaque In reply to Le-Vane [2015-05-21 07:22:39 +0000 UTC]

Goodness! THANK you~!

👍: 0 ⏩: 1

Le-Vane In reply to TANblaque [2015-05-21 17:40:17 +0000 UTC]

You're very welcome! ^^

👍: 0 ⏩: 0

The-Art-Rat [2015-04-18 11:33:14 +0000 UTC]

Where exactly do you put the image thing in the code?

👍: 0 ⏩: 1

pica-ae In reply to The-Art-Rat [2015-04-18 14:37:55 +0000 UTC]

Well, you can put it into any class in your CSS, either those provided by DA or custom ones you create yourself. You can add the CSS in the "Edit Skin" field in stash writer, for the CSS itself, the exact placement is not that important as long as you don't double some styling. CSS is read from top to bottom by the browser, so if you want to be save, place it at the end of the CSS  
If you need to know more about DA's classes, they are described here CSS Tricks: Journal break-down  

👍: 0 ⏩: 0

Sparkanine [2015-04-14 19:12:23 +0000 UTC]

How about adding links to the skin itself like what you have at the bottom of the skin above? I would like to add links to the bottom of my skin as well for my group page Souls-Of-The-Cosmos Any ideas or ways you can help? :3

👍: 0 ⏩: 1

pica-ae In reply to Sparkanine [2015-04-15 09:40:06 +0000 UTC]

I always place links like that in the footer section of the skin editor in stash writer. They are going to be part of the skin, just like the header would be. Those two sections are for HTML that is supposed to be in the skin by default. 
You can style those links any way you want, I've created a background color with more padding, so that not only the text is clickable and you can place them pretty much where you want in the layout. 

👍: 0 ⏩: 0

SugarCandies [2015-03-07 06:16:52 +0000 UTC]

I can't figure out the coding Q^Q
It shows up, but I cant put anything in it. 

👍: 0 ⏩: 1

pica-ae In reply to SugarCandies [2015-03-09 08:25:58 +0000 UTC]

I am not sure what you mean exactly. You write the code for a blockquote styling and that styling does not show up? Or the styling shows up and you can't put words into it? 

If you're working in sta.sh writer, you may want to switch to HTML mode.
If in rich text editing, you write the text first, select it and use the buttons to make it a blockquote.
  

And sometimes the issue is as simple as spelling. I keep mistyping : for ; all the time

👍: 0 ⏩: 1

SugarCandies In reply to pica-ae [2015-03-10 01:44:19 +0000 UTC]

THANK YOU SO MUCHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
IT WAS SO SIMPLEEEEEEEE 

👍: 0 ⏩: 0

TheBrassGlass [2015-02-15 17:51:29 +0000 UTC]

This is so helpful, thank you! I was wondering if you know how to make the journal box (and header image) stretch with browser size?

👍: 0 ⏩: 1


| Next =>