Background Images Shortcut Notation

        background: url(images/whatever.png) 80% 50% no-repeat;
      

Shortcut notation above is same as the following if the ingredients are listed in proper order.

        background-image: url(images/whatever.png);
        background-position: 80% 50%;
        background-repeat: no-repeat;
      

Notes on CSS Gradients

The default is gradient fade over 100% of the block:   background-image: linear-gradient(#0000CC, #ffffff) Can override the default by setting fade duration:   background-image: linear-gradient(#DDDDFF, #ffffff 33%) Can set multiple levels of fade (1st half: blue to red, 2nd half red to white):   background-image: linear-gradient(#DDDDFF, #FFDDDD, #FFFFFF) This uses 4 levels to emulate the 33% fade above:   background-image: linear-gradient(#DDDDFF, #FFFFFF, #FFFFFF, #FFFFFF) Can play with the alpha channel (opacity) -- must use rgba() notation:   background-image: linear-gradient( rgba(221, 221, 255, 1), rgba(221, 221, 255, 0) ) Gets weird when try to control like a background image:   background-image: linear-gradient(#DDDDFF, #FFFFFF); background-size: 25px 25px;