Background-image

The background image for an element.

Syntax
      background-image: url( URI[,URI...] ) | none | inherit ;

URI - The path to an image file.
none - Remove the background image.
inherit - Inherit from a parent element.

The background image is drawn on top of the background-color but underneath the borders. It is possible to set both a background-color and a background-image - typically when the image is smaller than the element or contains transparent areas. Use background-position to place the image, and set background-repeat: no-repeat

By default background images will not be included when the page is printed. If the image is part of the content (rather than navigation / decorative images) then it should be displayed using a foreground <IMG> tag along with an ALT attribute.

New in CSS3 is the ability to specify multiple background images. Specify multiple images as a comma-separated list, each value will become a separate ‘background layer’. The the first value in the list represents the top layer (closest to the user), with subsequent layers rendered behind successively. If the images are the same or similar sizes, then you might have to use background-position to make them both visible and not stacked on top of one another. (supported in IE 9+ and all other major browsers)

Linear-gradient

Linear-gradient can also be used to apply a color gradient to an element.

Syntax
      background-image: linear-gradient(
          [ [ angle | to side-or-corner ] ,]?
            color-stop[, color-stop]+
      )

Key
   angle | to..   The first argument, specifies the gradient line, which gives the gradient a
                  direction and determines how  color-stops are positioned.
                  It may be omitted; if so, it defaults to ‘to bottom’.
                  The gradient line's direction may be specified in two ways:

                  using angles:
                  ‘0deg’ points upward, and positive angles represent clockwise rotation,
                  so ‘90deg’ point toward the right.

                  using keyword
                  If the argument is ‘to top’, ‘to right’, ‘to bottom’, or ‘to left’,
                  the angle of the gradient line is ‘0deg’, ‘90deg’, ‘180deg’, or ‘270deg’, respectively.
                  keywords can be combined: ‘to top left’ , ‘to bottom right’ etc

   side-or-corner = [top | bottom] || [left | right]

If a background image is applied to an <a> anchor tag ( or any other non-block level element), you can set display:block that will allow you to apply height and width to the image.

The older experimental vendor prefixes for background-image, use top / bottom instead of to bottom and to top.
The standardized W3C function only accepts the new syntax with the to keyword.

Examples of linear-gradient

A gradient tilted 45 degrees, starting blue and finishing red:
linear-gradient(45deg, blue, red);

A gradient going from the bottom right to the top left corner, starting blue and finishing red:
linear-gradient(to left top, blue, red);

Color stop: A gradient going from the bottom to top, starting blue, turning green at 40% of its length, and finishing red:
linear-gradient(0deg, blue, green 40%, red);

Color hint: A gradient going from the left to right, starting red, getting to the midpoint color 10% of the way across the length of the gradient, taking the rest of the 90% of the length to change to blue:
linear-gradient(.25turn, red, 10%, blue);

Multi-position color stop: A gradient tilted 45 degrees, with a red bottom-left half and a blue top-right half, with a hard line where the gradient changes from red to blue:
linear-gradient(45deg, red 0 50%, blue 50% 100%);

Radial-gradient

Syntax
      background-image: radial-gradient(
      [ [ shape || size ] [ at position ]? , | at position, ]?
         [ , color-stop ]+
      )

Key
   shape       Either ‘circle’ or ‘ellipse’; determines the gradient's ending shape.
               If shape is omitted, the ending shape defaults to a circle if the size
               is a single length, and to an ellipse otherwise.

   size        The size of the gradient's ending shape:
               closest-side     The ending shape is sized so that that it exactly meets
                                the side of the gradient box closest to the gradient's center.
                                If the shape is an ellipse, it exactly meets the closest side in each dimension.

               farthest-side    Same as ‘closest-side’, except the ending shape is sized based on the farthest side(s).

               closest-corner   The ending shape is sized so that that it passes through
                                the corner of the gradient box closest to the gradient's center.
                                If the shape is an ellipse, the ending shape is given the same
                                aspect-ratio it would have if ‘closest-side’ were specified.

               farthest-corner  Same as ‘closest-corner’, except the ending shape is sized based on the farthest corner. 

               If shape is specified as ‘circle’ or is omitted, the size may be given
               explicitly as: length (The radius of the circle.)

               If shape is specified as ‘ellipse’ or is omitted, the size may be given
               explicitly as: [Horizlength | HorizPercentage] [VerticalLength | VerticalPercentage]

   position    The center of the gradient.
               [ [ percentage | length | left | center | right ] [ percentage |
                  length | top | center | bottom ]? ] |
                  [ [ left | center | right ] || [ top | center | bottom ] ] | inherit

Examples:

body { background-image: url("header.jpg"); }

h1 { background-image: url('arrow.gif'); }

#emw3id { background-image: url('https://www.google.com/favicon.ico'); }

.emw3class {
  background-image: linear-gradient(to bottom, #FFF 0px, #E4E4E4 100%);
}

.gray-lines {
  background-image: repeating-linear-gradient(to bottom, #dcdcdc, #dcdcdc 0.0625rem, transparent 0.0625rem, transparent 0.25rem);

Try it:

(CSS 1) Browser Support: All major browsers, including IE 10 and greater

“Beauty itself is but the sensible image of the Infinite” ~ Francis Bacon

Related:

Background-image - MDN Web Docs.
CSS 3 Linear Gradients - CSS Tricks
Background-Attachment - Position of a background image relative to the page.
Background-Color - The background color of an element.
Background-Position - Starting position of a background image.
Background-Repeat - How a background image will be repeated.
Background - A shorthand for the background properties above.
Background-Size - Size or resize a background image.
Subtle patterns via Toptal.