{"id":3012,"date":"2016-10-24T10:34:19","date_gmt":"2016-10-24T15:34:19","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=1953"},"modified":"2016-10-24T10:34:19","modified_gmt":"2016-10-24T15:34:19","slug":"using-csss-background-property","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/using-csss-background-property\/","title":{"rendered":"Using CSS&#8217;s Background Property"},"content":{"rendered":"<p>CSS&#8217;s background property actually covers a whole lot of other properties, meaning that the background property is actually sort of\u00a0all-inclusive and\u00a0will take up to 8 values. The background property shorthand covers the background-color (for when you want to define a color as the background of an element), background-image (for when you want to use an image as the background of an element), background-repeat (do you want the background image to repeat vertically or horizontally?), background-attachment (how do you want the background to be positioned in regards to the viewport?), background-position (where do you want your background to be positioned in regards to the surrounding elements?), background-origin (yet another positioning property), and background-clip (to specify the content limit of the background). Check out the syntax and the order of the properties in the example below to learn how to use the property for yourself. All of the properties included in the background shorthand can be defined on their own, but your code will look a lot cleaner if you just use the shorthand:<\/p>\n<div id=\"ig-sh-1\" class=\"syntax_hilite\">\r\n\r\n\t\t<div class=\"toolbar\">\r\n\r\n\t\t<div class=\"view-different-container\">\r\n\t\t\t\t\t\t<a href=\"#\" class=\"view-different\">&lt; View <span>plain text<\/span> &gt;<\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t<div class=\"language-name\">css<\/div>\r\n\r\n\t\t\r\n\t\t<br clear=\"both\">\r\n\r\n\t<\/div>\r\n\t\r\n\t<div class=\"code\">\r\n\t\t<ol class=\"css\" style=\"font-family:monospace\"><li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\"><span style=\"color: #000000;font-weight: bold\">background<\/span><span style=\"color: #00AA00\">:<\/span> <span style=\"color: #00AA00\">&#091;<\/span><span style=\"color: #000000;font-weight: bold\">background-color<\/span><span style=\"color: #00AA00\">&#093;<\/span> <span style=\"color: #00AA00\">&#091;<\/span><span style=\"color: #000000;font-weight: bold\">background-image<\/span><span style=\"color: #00AA00\">&#093;<\/span> <span style=\"color: #00AA00\">&#091;<\/span><span style=\"color: #000000;font-weight: bold\">background-repeat<\/span><span style=\"color: #00AA00\">&#093;<\/span> <span style=\"color: #00AA00\">&#091;<\/span><span style=\"color: #000000;font-weight: bold\">background-attachment<\/span><span style=\"color: #00AA00\">&#093;<\/span> <span style=\"color: #00AA00\">&#091;<\/span><span style=\"color: #000000;font-weight: bold\">background-position<\/span><span style=\"color: #00AA00\">&#093;<\/span> \/ <span style=\"color: #00AA00\">&#091;<\/span>background-size<span style=\"color: #00AA00\">&#093;<\/span> <span style=\"color: #00AA00\">&#091;<\/span>background-origin<span style=\"color: #00AA00\">&#093;<\/span> <span style=\"color: #00AA00\">&#091;<\/span>background-clip<span style=\"color: #00AA00\">&#093;<\/span><span style=\"color: #00AA00\">;<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n<div class=\"wp-socializer wpsr-share-icons \" data-lg-action=\"show\" data-sm-action=\"show\" data-sm-width=\"768\" ><h3>Share and Enjoy !<\/h3><div class=\"wpsr-si-inner\"><div class=\"wpsr-counter wpsrc-sz-32px\" style=\"color:#000\"><span class=\"scount\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook,twitter,linkedin,pinterest,print,pdf\">0<\/span><\/span><small class=\"stext\">Shares<\/small><\/div><div class=\"socializer sr-popup sr-32px sr-circle sr-opacity sr-pad sr-count-1 sr-count-1\"><span class=\"sr-facebook\"><a rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/share.php?u=\" target=\"_blank\"  title=\"Share this on Facebook\"  style=\"color: #ffffff\" ><i class=\"fab fa-facebook-f\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-twitter\"><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%20-%20%20\" target=\"_blank\"  title=\"Tweet this !\"  style=\"color: #ffffff\" ><i class=\"fab fa-twitter\"><\/i><\/a><\/span>\n<span class=\"sr-linkedin\"><a rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=\" target=\"_blank\"  title=\"Add this to LinkedIn\"  style=\"color: #ffffff\" ><i class=\"fab fa-linkedin-in\"><\/i><\/a><\/span>\n<span class=\"sr-pinterest\"><a rel=\"nofollow\" href=\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=&amp;media=&amp;description=\" target=\"_blank\"  title=\"Submit this to Pinterest\"  style=\"color: #ffffff\" data-pin-custom=\"true\"><i class=\"fab fa-pinterest\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"pinterest\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-print\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Print this article \"  style=\"color: #ffffff\" ><i class=\"fa fa-print\"><\/i><\/a><\/span>\n<span class=\"sr-pdf\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Convert to PDF\"  style=\"color: #ffffff\" ><i class=\"fa fa-file-pdf\"><\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>CSS&#8217;s background property actually covers a whole lot of other properties, meaning that the background property is actually sort of\u00a0all-inclusive and\u00a0will take up to 8 values. The background property shorthand covers the background-color (for when you want to define a [&#8230;]<\/p>\n<p><a class=\"more-link article\" href=\"https:\/\/cssdeck.com\/blog\/using-csss-background-property\/\" title=\"Click to read 'Using CSS&#8217;s Background Property'\">Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[173,175],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3012"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=3012"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3012\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=3012"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=3012"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=3012"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}