Las propiedades de fondo CSS se utilizan para definir los efectos de fondo para los elementos.
propiedades de fondo CSS:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Color de fondo
El background-color propiedad especifica el color de fondo de un elemento.
El color de fondo de una página se establece así:
Con CSS, un color más a menudo se especifica por:
- un nombre válido de color - como "red"
- un valor HEX - como "#ff0000"
- un valor RGB - como "rgb(255,0,0)"
Mira valores de color CSS para obtener una lista completa de los posibles valores de color.
En el siguiente ejemplo, el <h1>, <p> y <div> elementos tienen diferentes colores de fondo:
Ejemplo
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color:
yellow;
} Inténtalo tú mismo " Imagen de fondo
La background-image propiedad especifica una imagen para usar como fondo de un elemento.
Por defecto, la imagen se repite de forma que cubra todo el elemento.
La imagen de fondo de una página se puede establecer la siguiente manera:
A continuación se muestra un ejemplo de una mala combinación de la imagen de fondo del texto y. El texto no es legible:
 | Nota: Si seutiliza una imagen de fondo, utilice una imagen que no perturbe el texto. |
|---|
Fondo de imagen - Repetir horizontal o vertical
Por defecto, la background-image propiedad repite una imagen, tanto horizontal como verticalmente.
Algunas de las imágenes se deben repetir sólo en horizontal o vertical, o van a parecer extraño, como esto:
Si la imagen anterior se repite tanto en sentido horizontal ( background-repeat: repeat-x; ), el fondo se verá mejor:
Ejemplo
body
{
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Inténtalo tú mismo " | Nota: Para repetir una imagen fijado verticalmente background-repeat: repeat-y; |
|---|
Fondo de imagen - Establecer la posición y no-repeat
Mostrando la imagen de fondo una sola vez también se especifica por el background-repeat propiedad:
Ejemplo
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
Inténtalo tú mismo " En el ejemplo anterior, la imagen de fondo se muestra en el mismo lugar que el texto. Queremos cambiar la posición de la imagen, de modo que no perturbe el texto demasiado.
La posición de la imagen se especifica mediante el background-position propiedad:
Ejemplo
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Inténtalo tú mismo " Fondo de imagen - Posición fija
Para especificar que la imagen de fondo debe ser fijo (no se desplazará con el resto de la página), utilice el background-attachment propiedad:
Ejemplo
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Inténtalo tú mismo " Antecedentes - Abreviación de las propiedades
Para acortar el código, también es posible especificar todas las propiedades de fondo en una sola propiedad. Esto se llama una propiedad abreviada.
La propiedad abreviada para el fondo es background :
Cuando se utiliza la propiedad rápida el orden de los valores de la propiedad es:
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position
No importa si uno de los valores de la propiedad no se encuentra, siempre y cuando los otros son en este orden.
Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 »
Todas las propiedades CSS Antecedentes
| Propiedad | Descripción |
|---|---|
| background | Establece todas las propiedades de fondo en una declaración |
| background-attachment | Establece si la imagen de fondo se fija o se desplaza con el resto de la página |
| background-color | Establece el color de fondo de un elemento |
| background-image | Establece la imagen de fondo de un elemento |
| background-position | Establece la posición de partida una imagen de fondo de |
| background-repeat | Establece cómo se repetirá una imagen de fondo |