CSS3′s Background Property: the Shorthand

Datetime:2016-08-23 03:06:43          Topic: CSS3           Share

There are a lot 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.

The shorthand for the background property will take up to 8 values:

  1. background : [ background-color ] [ background-image ] [ background-repeat ] [ background-attachment ] [ background-position ] / [ background-size ] [ background-origin ] [ background-clip ]

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.





About List