CSS Fondo
Las propiedades de fondo CSS se utilizan para definir el fondo de los elementos HTML.
Las propiedades CSS definen los efectos de fondo:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Color de fondo
La propiedad background-color define el color de fondo de un elemento.
El color de fondo de una página se usa en el selector body:
En CSS, los valores de color generalmente se definen de las siguientes maneras:
- Hexadecimal - como: "#ff0000"
- RGB - como: "rgb(255,0,0)"
- Nombres de color - como: "red"
En el siguiente ejemplo, los elementos h1, p y div tienen diferentes colores de fondo:
Ejemplo
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
Pruébalo »
Imagen de fondo
La propiedad background-image describe la imagen de fondo de un elemento.
De forma predeterminada, la imagen de fondo se repite en mosaico para cubrir todo el elemento.
Ejemplo de configuración de imagen de fondo de página:
A continuación se muestra un ejemplo de una mala combinación de texto e imagen de fondo. La legibilidad del texto es deficiente:
Imagen de fondo: repetición horizontal o vertical
De forma predeterminada, la propiedad background-image se repite en dirección horizontal o vertical de la página.
Si algunas imágenes se repiten en dirección horizontal y vertical, se ven muy descoordinadas, como se muestra a continuación:
Si la imagen solo se repite en dirección horizontal (repeat-x), el fondo de la página se verá mejor:
Imagen de fondo: configurar posicionamiento y sin repetición
Haz que la imagen de fondo no afecte la maquetación del texto.
Si no deseas que la imagen se repita, puedes usar la propiedad background-repeat:
En el ejemplo anterior, la imagen de fondo y el texto se muestran en la misma posición. Para que la maquetación de la página sea más razonable y no afecte la lectura del texto, podemos cambiar la posición de la imagen.
Puedes usar la propiedad background-position para cambiar la posición de la imagen en el fondo:
Ejemplo
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
Pruébalo »
Fondo: propiedad abreviada
En los ejemplos anteriores podemos ver que el color de fondo de la página se controla mediante muchas propiedades.
Para simplificar el código de estas propiedades, podemos combinar estas propiedades en una sola.
La propiedad abreviada para el fondo es "background":
Cuando se usa la propiedad abreviada, el orden de los valores de las propiedades es:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
No es necesario usar todas las propiedades anteriores; puedes usarlas según las necesidades reales de la página.
Este ejemplo usa CSS presentado anteriormente; puedes consultar los ejemplos correspondientes:Ejemplos CSS
Más ejemplos
Cómo configurar una imagen de fondo fija
Este ejemplo demuestra cómo configurar una imagen de fondo fija. La imagen no se desplazará con el resto de la página.
Propiedades de fondo CSS
| Property | Descripción |
|---|---|
| background | Propiedad abreviada que establece las propiedades de fondo en una sola declaración. |
| background-attachment | Indica si la imagen de fondo está fija o se desplaza con el resto de la página. |
| background-color | Establece el color de fondo del elemento. |
| background-image | Establece una imagen como fondo. |
| background-position | Establece la posición inicial de la imagen de fondo. |
| background-repeat | Establece si la imagen de fondo se repite y cómo. |