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]

Vendor prefixes:

-moz-linear-gradient, -webkit-linear-gradient, -o-linear-gradient and -ms-linear-gradient.
Heres a gradient tool that can generate the color codes.

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

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.

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:

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

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

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

Try it:

This is a sample of text with a CSS background image. New in CSS3 is the ability to specify multiple background images. Specify multiple images as a comma-separated list.

By default background images will not be included when the page is printed.

(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:

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.
subtlepatterns.com


© Copyright SS64.com 1999-2015
Some rights reserved