Background-image

The background image for an element.

Syntax
      background-image: url(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 may 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)

Also new in CSS 3, background-image can be used to apply a color gradient using the 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. (Gradients are an experimental feature so the syntax could change before they are finalized.)

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

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(top, #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.

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

Related:

Examples of 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-2014
Some rights reserved