{"id":726,"date":"2015-02-10T08:06:30","date_gmt":"2015-02-10T12:06:30","guid":{"rendered":"http:\/\/tech.creed3.com\/?p=726"},"modified":"2015-02-08T08:24:09","modified_gmt":"2015-02-08T12:24:09","slug":"lined-background-with-css","status":"publish","type":"post","link":"https:\/\/tech.creed3.com\/?p=726","title":{"rendered":"Lined background with CSS"},"content":{"rendered":"<p>Working on a new site, I was wanting a lined, or striped background. &nbsp;It&#8217;s a simple thing to do with an image, and you can keep the image small so the impact on load time is negligible, but I wondered could you do the same thing with CSS?<!--more--><\/p>\n<p>In short order I found <a href=\"http:\/\/lea.verou.me\/2010\/12\/checkered-stripes-other-background-patterns-with-css3-gradients\/\" target=\"_blank\">Checkerboard, striped &#038; other background patterns with CSS3 gradients<\/a> by Lea Verou. &nbsp;A fabulous tutorial on just this sort of thing and more.<\/p>\n<p>After playing with the settings a bit I ended up with this pattern:<\/p>\n<style type=\"text\/css\">\n<!--\n#bgexample {\ndisplay: block;\nwidth: 300px;\nheight: 80px;\nmargin: 10px auto;\nbackground: #601010;\nbackground-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.7, rgba(255, 255, 255, .2)), color-stop(.7, transparent), to(transparent));\nbackground-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 70%, transparent 70%, transparent);\nbackground-image: -o-linear-gradient(rgba(255, 255, 255, .2) 70%, transparent 70%, transparent);\nbackground-image: linear-gradient(rgba(255, 255, 255, .2) 70%, transparent 70%, transparent);\n-webkit-background-size: 8px 8px;\n-moz-background-size: 8px 8px;\nbackground-size: 8px 8px;\n}\n-->\n<\/style>\n<div id=\"bgexample\"><\/div>\n<p>Pretty cool stuff.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Working on a new site, I was wanting a lined, or striped background. &nbsp;It&#8217;s a simple thing to do with an image, and you can keep the image small so the impact on load time is negligible, but I wondered could you do the same thing with CSS?<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,16,30],"tags":[],"class_list":["post-726","post","type-post","status-publish","format-standard","hentry","category-css","category-technology","category-web-development"],"views":1846,"_links":{"self":[{"href":"https:\/\/tech.creed3.com\/index.php?rest_route=\/wp\/v2\/posts\/726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tech.creed3.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tech.creed3.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tech.creed3.com\/index.php?rest_route=\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/tech.creed3.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=726"}],"version-history":[{"count":0,"href":"https:\/\/tech.creed3.com\/index.php?rest_route=\/wp\/v2\/posts\/726\/revisions"}],"wp:attachment":[{"href":"https:\/\/tech.creed3.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=726"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tech.creed3.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=726"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tech.creed3.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}