{"id":1960,"date":"2016-06-23T14:36:09","date_gmt":"2016-06-23T14:36:09","guid":{"rendered":"http:\/\/cssreset.com\/?p=1960"},"modified":"2016-06-23T14:36:09","modified_gmt":"2016-06-23T14:36:09","slug":"css3s-background-property-the-shorthand","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/css3s-background-property-the-shorthand\/","title":{"rendered":"CSS3’s Background Property: the Shorthand"},"content":{"rendered":"

There are a lot<\/em>\u00a0 of different variations for CSS3’s background property that are used very often — especially when we’re working with a background that’s an image. Styling a background can result in the accumulation of several different lines of CSS, each one defining a different variation of the background property. OR, we can make things a little simpler by using shorthand to define all of the values of the background property.<\/p>\n

The shorthand for the background property will take up to 8 values:<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
css<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. background<\/span>:<\/span> [<\/span>background-color<\/span>]<\/span> [<\/span>background-image<\/span>]<\/span> [<\/span>background-repeat<\/span>]<\/span> [<\/span>background-attachment<\/span>]<\/span> [<\/span>background-position<\/span>]<\/span> \/ [<\/span>background-size]<\/span> [<\/span>background-origin]<\/span> [<\/span>background-clip]<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    This short hand property contains a lot of values, but using it will definitely help to clean up and condense your code. Be sure to use the forward slash after background position if you’re going to also include background-size for cross-browser compatibility.<\/p>\n

    Share and Enjoy !<\/h3>
    0<\/span><\/span>Shares<\/small><\/div>
    <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

    There are a lot\u00a0 of different variations for CSS3’s background property that are used very often — especially when we’re working with a background that’s an image. Styling a background can result in the accumulation of several different lines of […]<\/p>\n

    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":[41,6],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1960"}],"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=1960"}],"version-history":[{"count":1,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1960\/revisions"}],"predecessor-version":[{"id":1961,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1960\/revisions\/1961"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1960"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1960"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}