background

Índice

Definición de .background utilizado en CSS

La propiedad .background en CSS le permite controlar el .background de cualquier elemento (lo que pinta debajo del contenido en ese elemento). Es una propiedad abreviada, lo que significa que le permite escribir cuáles serían varias propiedades de CSS en una. Como esto:

Caso de empleo de la propiedad background

Esta propiedad de CSS se utiliza de la siguiente manera:

body {
  background:
     url(sweettexture.jpg)    /* image */
     top center / 200px 200px /* position / size */
     no-repeat                /* repeat */
     fixed                    /* attachment */
     padding-box              /* origin */
     content-box              /* clip */
     red;                     /* color */
}

Otro ejemplo más avanzado de .background es el siguiente de CODEPEN:

Sintaxis de .background en CSS

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

Valores

Valor Descripción CSS Manifestación
Especifica el color de fondo que se utilizará 1
Especifica UNA o MÁS imágenes de fondo que se utilizarán 1
Especifica la posición de las imágenes de fondo. 1
Especifica el tamaño de las imágenes de fondo. 3
Especifica cómo repetir las imágenes de fondo 1
Especifica el área de posicionamiento de las imágenes de fondo. 3
Especifica el área de pintura de las imágenes de fondo. 3
Especifica si las imágenes de fondo son fijas o se desplazan con el resto de la página 1
inicial Establece esta propiedad en su valor predeterminado. 3
heredar Hereda esta propiedad de su elemento principal. 2

Exploradores compatibles con .background

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.

Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.

PropertyChromeInternet Explorer / EdgeFirefoxSafariOpera
background-attachment 1.0 4.0 1.0 1.0 3.5

Bibliografía

No dudes en echar un vistazo a estas otras propiedades

¿Necesitas ayuda para crear tu Web?

Cuéntanos de que trata y te asesoraremos sin compromiso