Backgrounds & Gradients

Background Color

Background Image

Background Repeat

Background Position

Shorthand Background Image Values

div {
  background: #b2b2b2 url("alert.png") 20px 10px no-repeat

Gradient Backgrounds

Linear Gradient Background

div {
  background: #466368;
  background: -webkit-linear-gradient(#648880, #293f50);
  background:    -moz-linear-gradient(#648880, #293f50);
  background:         linear-gradient(#648880, #293f50);}

Changing the Direction of a Gradient Background

div {
  background: #466368;
  background: linear-gradient(to right bottom, #648880, #293f50);}

Radial Gradient Background

div {
  background: #466368;
  background: radial-gradient(#648880, #293f50);}

Gradient Color Stops

div {
  background: #648880;
  background: linear-gradient(to right, #f6f1d3, #648880, #293f50);}

div {
  background: #648880;
  background: linear-gradient(to right, #f6f1d3, #648880 85%, #293f50);}

Multiple Background Images Example

.notice-success {
  background: #67b11c;
  background: url("tick.png") 20px 50% no-repeat, linear-gradient(#72c41f, #5c9e19);
  border: 2px solid #467813;
  border-radius: 5px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 15px 20px 15px 50px;}

CSS3 Background Size

div {
  background: url("shay.jpg") 0 0 no-repeat;
  background-size: auto 75%;
  border: 2px dashed #9799a7;
  height: 240px;
  width: 200px;}