Using the background property in css you can specify a background image and a css3 gradient. This is particularly useful for png icons on top of gradients. In this instance the icon has a transparent background and is placed on top of the css3 gradient.
The proper format is background: [background-image], [background-gradient].
Quick Tip: The comma tells CSS "Hey! There is a secondary rule, display it also."
When working with gradients, or CSS3 properties in general, it is important to specify a fallback style. In this case a standard background image and color should suffice.
A great resource for building CSS3 Gradients is Ultimate CSS Gradient Generator. It will generate proper styles for the gradients in all major browsers along with fallback styles for older ones. All you have to do is add the first line for the background image url and you are good to go.
Join the conversation