background-image CSS

La propiedad background-image utiliza una imagen ( jpg, png, gif, svg ) o un gradiente ( lineal o radial ) como imagen de fondo de un elemento HTML.

Imágenes jpg, png, gif

Para utilizar una imagen como fondo de un elemento HTML utilizamos esta sintaxis:

.elemento {
    background-image: url(carpeta/donde/esta/la/imagen.png);
  }

También podemos utilizar una imagen como dataUri:  

.elemento {
        background-image : url(data:image/png;base64,iVBORw0KGgoA.........ErkJggg==);
        }

Patrones CSS

Por defecto el CSS repite ( background-repeat ) la imagen de fondo ( background-image ) en todas las direcciones, tantas veces como fuera necesario, hasta cubrir completamente el elemento. Es exactamente lo que hacen los patrones. Si la imagen es más grande de lo necesario podemos utilizar la propiedad background-size para establecer el tamaño de la imagen que se repite:

.elemento{
  background-image:url(imagen.jpg);
  background-size:50px; 
  }

Elementos SVG

Si los elementos svg están guardados en documentos .svg externos podemos utilizarlos como imagen de fondo de la misma manera como lo hacemos con las imágenes jpg, png, gif:

.elemento {
    background-image: url(carpeta/donde/esta/la/imagen.svg);
  }

También podemos utilizar un elemento svg como dataUri.

.data-uri-encoded{ 
 background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='106px' height='122px' viewBox='41 54 106 122'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' stroke='%23ED1D24' stroke%2Dwidth='2' d='M143.099 . . . . %3C/svg%3E";
}

Esta es una herramienta muy útil para transformar un elemento SVG en data Uri: URL-encoder for SVG.
Solo hay que pegar el codigo SVG en el textarea donde pone Insert your SVG: y copiar el codigo que aparece en el textarea donde pone Ready for CSS: o Take encoded:.

Lea acerca de Patrones SVG en css

Gradientes

Otro posible valor de background-image  es un gradiente lineal:

.elemento {
    background-image: linear-gradient( #F06, #000 );
  }

o un gradiente radial:

.elemento {
    background-image: radial-gradient( circle, #F06, #000 ); 
  }

Es interesante saber que, también en este caso, podemos crear patrones repetitivos utilizando background-image y gradientes.

Vea esta galería de patrones CSS creados utilizando gradientes: CSS3 Patterns Gallery.

Imágenes de fondo múltiples

En el CSS3 podemos utilizar varias imágenes de fondo para un solo elemento. Para esto tenemos que separar los url de las varias imágenes con una coma.

background: url( imagen1.gif ), url( imagen2.gif ), url( imagen3.gif );

El orden de apilamiento

Las imágenes aparecen apiladas, una encima de otra, de esta manera: la primera imagen ( imagen1.gif ) esta encima de la segunda ( imagen2.gif ), que esta encima de la tercera ( imagen3.gif ) y así sucesivamente.

#multiple.bgmultiple{
 width:150px; 
 height:150px; 
 border:1px solid #d9d9d9;
 background-repeat: no-repeat;
 } 
#multiple {
  background-image: url(images/azul1.gif), url(images/verde2.gif), url(images/magenta3.gif);
  background-position: 10px 10px;
}

<div class="bgmultiple" id="multiple"></div>

Para posicionar cada imagen de fondo en parte tenemos que utilizar la propiedad background.