Propiedad background de CSS

La propiedad CSS background es una abreviatura que permite establecer todos los estilos de fondo de un elemento en una sola declaración, en lugar de escribir cada propiedad en su propia línea. Internamente, se expande en las siguientes propiedades individuales:

background-color — establece un color de fondo sólido.
background-image — establece una o más imágenes de fondo para un elemento.
background-repeat — controla si la imagen de fondo se repite y cómo lo hace.
background-position — establece la posición inicial de la imagen de fondo.
background-origin — define el área relativa a la cual se posiciona la imagen (border-box, padding-box o content-box).
background-clip — define hasta dónde se extiende el fondo (color e imagen) dentro del elemento.
background-attachment — define si el fondo se desplaza con la página o permanece fijo.
background-size — define el tamaño de la imagen de fondo.

Por qué usar la abreviatura

Escribir una sola línea background es más corto y fácil de leer que cinco o seis propiedades separadas, y hace que tu intención sea evidente de un vistazo. Hay un efecto secundario importante que debes tener en cuenta: la abreviatura restablece al valor inicial todas las propiedades de fondo que no menciones. Por ejemplo, background: red; también restablece cualquier background-image, background-position, etc. definidos anteriormente. Por ello, declara la abreviatura primero y cualquier valor de anulación (como un background-size por separado) después.

Orden y reglas especiales

Los valores dentro de background pueden aparecer en casi cualquier orden, pero hay dos reglas importantes:

background-size debe ir a continuación de background-position, separado por una barra oblicua (/). Por ejemplo: background: url(bg.png) center / cover; — center es la posición y cover es el tamaño.
Cuando se superponen varias imágenes de fondo, background-color debe ir al final, solo en la última capa, porque el color se pinta detrás de todas las imágenes.

Valor inicial	Ver propiedades individuales.
Se aplica a	Todos los elementos. También se aplica a ::first-letter.
Heredable	No.
Animable	Sí. Background-color, background-position y background-size son animables.
Versión	CSS1+ nuevas propiedades en CSS3
Sintaxis DOM	object.style.background = "blue url(img.jpeg) bottom left repeat";

Sintaxis

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

Ejemplos

Un color de fondo simple

El uso más básico de la abreviatura es establecer únicamente el color de fondo. Cualquier valor que acepte la abreviatura puede omitirse; los demás vuelven a sus valores iniciales.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>Here the background color is set to green.</p>
  </body>
</html>

Pruébalo tú mismo »

Resultado

![Propiedad background de CSS](/uploads/media/default/0001/03/5774b8353b8a0b810579a25a3cdcc2580213b1ff.png "CSS background property result" =420x)

Usar una imagen de fondo

Puedes pasar una función url() a la abreviatura para pintar una imagen en el fondo.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: url("/uploads/media/default/0001/01/a1d4caa225542c577689287a36f4209808b08c19.jpeg");
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>Here a background image is used.</p>
  </body>
</html>

Pruébalo tú mismo »

Combinar varios valores

Este ejemplo establece el color, la imagen, el comportamiento de repetición, el anclaje y la posición en una sola declaración. La imagen está centrada, no se repite y permanece fija mientras la página se desplaza.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat fixed center;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>In this example background property specifies the background-color, the background-image property to set the image to the background, background-repeat to specify the image to be non repeated, background-attachment to specify the image to be fixed and background-position to specify the image to be in center.</p>
  </body>
</html>

Pruébalo tú mismo »

Establecer el tamaño del fondo

Como background-size no puede combinarse con el resto de la abreviatura sin una barra oblicua, a menudo es más limpio definirlo en su propia línea después de la abreviatura. Aquí, cover escala la imagen para cubrir todo el elemento.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #eee url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg") no-repeat center 100px;
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>Here the size for the background is set to cover.</p>
  </body>
</html>

Pruébalo tú mismo »

Recortar el fondo

La propiedad background-clip controla hasta dónde se pinta el fondo dentro del elemento. Con padding-box, el fondo se detiene en el borde interior del contorno, de modo que no se muestra a través de un borde punteado o discontinuo.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border: 8px dotted #ccc;
        padding: 25px;
        background: #ccc;
        background-clip: padding-box;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <div>
      <p>The background-clip for this div element is set to padding-box.</p>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Posicionar el origen del fondo

La propiedad background-origin establece el área relativa a la cual se posiciona la imagen. Con padding-box (el valor predeterminado), la imagen comienza desde el borde interior del contorno.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border: 10px double #ccc;
        padding: 25px;
        background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
        background-repeat: no-repeat;
        background-origin: padding-box;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>Here background-origin: padding-box (default) is set.</p>
    <div></div>
  </body>
</html>

Pruébalo tú mismo »

Valores

Valor	Descripción
background-color	Establece el color de fondo.
background-image	Establece una o más imágenes.
background-position	Especifica la posición de las imágenes de fondo.
background-size	Establece el tamaño de la imagen de fondo.
background-repeat	Especifica cómo se repiten las imágenes de fondo.
background-origin	Especifica el área de posicionamiento de las imágenes de fondo.
background-clip	Especifica el área de pintura de las imágenes de fondo.
background-attachment	Especifica si la imagen es fija o no.
initial	Establece esta propiedad a su valor predeterminado.
inherit	Hereda esta propiedad de su elemento padre.

Propiedades relacionadas

Si necesitas un control más preciso, utiliza las propiedades individuales:

Práctica

¿Cuáles son las propiedades de CSS background?