Propiedad CSS background
El CSS background es una abreviatura que se usa para establecer todas las propiedades de estilo de fondo. La propiedad background incluye las siguientes propiedades:
- background-color, que se usa para establecer un color de fondo.
- background-image, que se usa para establecer una o varias imágenes de fondo para un elemento.
- background-repeat, que se usa para controlar la posición repetida de un elemento.
- background-position, que se usa para establecer la posición de una imagen de fondo.
- background-origin, que se usa para definir el área de posicionamiento del fondo, que es la posición de una imagen colocada mediante la propiedad background-image.
- background-clip, que se usa para colocar la imagen o el color de fondo debajo de su borde.
- background-attachment, que se usa para definir si la imagen de fondo está fija o si se desplazará junto con el resto de la página.
- background-size, que se usa para definir el tamaño de la imagen de fondo.
Si una de las propiedades en la abreviatura background es background-size, se debe usar una barra inclinada para separarla de background-position.
Cuando se usan varias fuentes de background-image pero también se necesita background-color, este debe ir al final de la lista.
| Initial Value | Ver las propiedades individuales. |
|---|---|
| Applies to | Todos los elementos. También se aplica a ::first-letter. |
| Inherited | No. |
| Animatable | Sí. Background-color, background-position y background-size son animables. |
| Version | CSS1+ nuevas propiedades en CSS3 |
| DOM Syntax | object.style.background = "blue url(img.jpeg) bottom left repeat"; |
Sintaxis
Sintaxis de la propiedad CSS background
background: bg-color bg-image bg-position bg-size bg-repeat bg-origin bg-clip bg-attachment | initial | inherit;Ejemplo de la propiedad background:
Ejemplo de la propiedad CSS background color
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>Ejemplo de la propiedad background</h2>
<p>Aquí el color de fondo está establecido en verde.</p>
</body>
</html>Resultado
Ejemplo de la propiedad background con una imagen aplicada:
Ejemplo de la propiedad CSS background image
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url("https://es.w3docs.com/uploads/media/default/0001/01/a1d4caa225542c577689287a36f4209808b08c19.jpeg");
}
</style>
</head>
<body>
<h2>Ejemplo de la propiedad background</h2>
<p>Aquí se usa una imagen de fondo.</p>
</body>
</html>Consulta otro ejemplo con la propiedad background donde se aplican los valores background-color, background-image, background-repeat y background-attachment.
Ejemplo de la propiedad background con diferentes valores:
Ejemplo de la propiedad CSS background
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ccc url("https://es.w3docs.com/build/images/w3docs-logo-black.png") no-repeat fixed center;
}
</style>
</head>
<body>
<h2>Ejemplo de la propiedad background</h2>
<p>En este ejemplo, la propiedad background especifica background-color, la propiedad background-image para establecer la imagen como fondo, background-repeat para indicar que la imagen no se repita, background-attachment para indicar que la imagen estará fija y background-position para indicar que la imagen estará centrada.</p>
</body>
</html>En el siguiente ejemplo, la propiedad background-size se usa para especificar el tamaño del fondo.
Ejemplo de la propiedad background-size:
Ejemplo de la propiedad CSS background-size
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #eee url("https://es.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg") no-repeat center 100px;
background-size: cover;
}
</style>
</head>
<body>
<h2>Ejemplo de la propiedad background</h2>
<p>Aquí el tamaño del fondo está establecido en cover.</p>
</body>
</html>Aquí, la propiedad background-clip especifica hasta dónde debe extenderse el fondo dentro de un elemento.
Ejemplo de la propiedad background-clip:
Ejemplo de la propiedad CSS background-clip
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 8px dotted #ccc;
padding: 25px;
background: #ccc;
background-clip: padding-box;
}
</style>
</head>
<body>
<h2>Ejemplo de la propiedad background</h2>
<div>
<p>El background-clip para este elemento div está establecido en padding-box.</p>
</div>
</body>
</html>En el siguiente ejemplo, se usa la propiedad background-origin. Permite que la imagen de fondo comience desde la esquina superior izquierda del contenido.
Ejemplo de la propiedad background-origin:
Ejemplo de la propiedad CSS background-origin
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 10px double #ccc;
padding: 25px;
background: url("https://es.w3docs.com/build/images/w3docs-logo-black.png");
background-repeat: no-repeat;
background-origin: padding-box;
}
</style>
</head>
<body>
<h2>Ejemplo de la propiedad background</h2>
<p>Aquí se establece background-origin: padding-box (valor predeterminado).</p>
<div></div>
</body>
</html>Valores
| Value | Description |
|---|---|
| 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 repetir 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 está fija o no. |
| initial | Establece esta propiedad en su valor predeterminado. |
| inherit | Hereda esta propiedad de su elemento padre. |
Practice
What are the properties of CSS background?