Fondos CSS Avanzado

CSS permite múltiples imágenes de fondo para un elemento a través de la propiedad background-image.

Las diferentes imágenes de fondo son separadas por comas, y las imágenes son ordenadas una encima de otra, es decir, apiladas. En donde la primera es la más cercana visualmente, es decir, al frente de todas, y así las siguientes una posición detrás hasta que la última queda detrás de todas.

El siguiente ejemplo tiene dos imágenes de fondo, la primera se alinea a la esquina inferior derecha y la segunda es alineada a la esquina superior izquierda:

#ejemplo {
background-image: url(img-algo.png), url(img-fondo.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}

Se pueden especifica múltiples imágenes de fondo usando las propiedades de background individualmente o con la propiedad de escritura corta (taquigráfica).

En el siguiente ejemplo se usa la propiedad background de escritura corta (taquigráfica) obteniendo el mismo resultado que el ejemplo anterior:

#ejemplo {
background: url(img-algo.png) right bottom no-repeat,
url(img-fondo.png) left top repeat;
}

Tamaño de Fondo CSS

La propiedad background-size permite especificar el tamaño de las imágenes de fondo. El tamaño puede ser especificado en longitudes, porcentaje o utilizando una de las dos palabras claves: contein o cover.

En el siguiente ejemplo se cambia el tamaño a uno mucho menor que el tamaño original de la imagen usando pixeles:

#ejemplo {
background: url(img-algo.png);
background-size: 100px 80px;
background-repeat: no-repeat;
}

Los otros dos posibles valores para background-size son cotain o cover.

La palabra clave contain ajusta la imagen a ser lo más largo posible del área que lo contiene, tanto a lo ancho como a lo alto. Dependiendo de las propiedades de la imagen de fondo y del área de posicionamiento del fondo, puede haber áreas del fondo que no estén cubiertas por la imagen.

La palabra clave cover ajusta la imagen de fondo completamente a lo largo del área que lo contiene, tanto a lo ancho como lo alto. Algunas partes de la imagen de fondo puede no ser visible por el posicionamiento del área.

El siguiente ejemplo muestra el uso de contain y cover:

#div1 {
background: url(img_algo.png);
background-size: contain;
background-repeat: no-repeat;
}
#div2 {
background: url(img_algo.png);
background-size: cover;
background-repeat: no-repeat;
}

Tamaño para múltiples Imágenes de fondo

La propiedad background-size también acepta múltiples valores para especificar varios tamaños de las imágenes de fondo, separando los valores por comas para especificar el tamaño de cada una de la imágenes.

El siguiente ejemplo especifica tres imágenes de fondo, con diferente valor de background-size para cada imagen:

#imagenes-varias {
background: url(img_arbol.png) left top no-repeat,
url(img_arbusto.png) right bottom no-repeat,
url(img_planta.png) left top repeat;
background-size: 50px, 130px, auto;
}

Imagen de Fondo a tamaño completo

Si deseamos tener una imagen de fondo en un sitio web que abarque por completo la ventana del navegador web todo el tiempo 

Los requerimientos son los siguiente:

  • Rellenar por completo la página con una imagen sin espacios.
  • Escalar la imagen según sea necesario.
  • Centrar la imagen en la página.
  • No generar barras de desplazamiento.

En el siguiente ejemplo, dado que el elemento <html> es el elemento más alto en la jerarquía de los demás elementos HTML del documento, es al cual le especificamos la propiedad background con los valores de no-repeat (no repetir), fixed (fijado) y centered (centrado), posteriormente especificamos la propiedad background-size con el valor cover (cubrir):

html {
background: url(img_algo.png) no-repeat center fixed;
background-size: cover;
}

Imagen Héroe

Es posible usar diferentes propiedades background en un elemento <div> para crear una imagen héroe, es decir, una imagen grande con texto, y colocarla en donde lo desees.

.imagen-heroe {
background: url(img-algo.png) no-repeat center;
background-size: cover;
height: 500px;
position: relative;
}

La propiedad background-origin CSS

La propiedad background-origin especifica en donde es posicionada la image.

La propiedad toma tres diferentes valores:

  • border-box : la imagen inicia en la esquina superior izquierda del borde.
  • padding-box : (predeterminado) la imagen inicia en la esquina superior izquierda del borde del relleno (padding).
  • content-box : la imagen inicia en en la esquina superior izquierda del contenido. 

El siguiente ejemplo, muestra la propiedad background-origin:

.imagen-origin {
border: 10px solid black;
padding: 35px;
background: url(img_algo.png);
background-repeat: no-repeat;
background-origin: content-box;
}

La propiedad background-clip CSS

La propiedad background-clip especifica el área de pintura del fondo.

La propiedad toma tres valores diferentes:

  • border-box : (predeterminado) el fondo es pintado en el borde exterior del borde.
  • padding.box : el fondo es pintado en el borde exterior del relleno (padding).
  • conten-box : el fondo es pintado dentro del contenido de la caja. 

El siguiente ejemplo, muestra la propiedad background-clip:

.imagen-clip {
border: 10px solid black;
padding: 35px;
background: yellow;
background-clip: content-box;
}

Propiedades de Background Avanzado

Propiedad Descripción
background Propiedad de escritura corta (taquigráfica) para especificar las propiedades de fondo en una sola declaración.
background-clip Especifica el área de pintura del fondo. 
background-image Especifica una o más imágenes de fondo para un elemento.
background-origin Especifica en donde es posicionada la imagen de fondo.
background-size Especifica el tamaño de una imagen de fondo.