9.1 Introducción a los fondos
En CSS, existe la propiedad background que sirve para darle estilos al fondo. En esta sección, iremos viendo cada una de las propiedades CSS para el fondo.
9.2 Los colores de fondo
Para aplicarle un color de fondo a nuestra web, usamos la propiedad background-color. Esta propiedad se le podemos aplicar a cualquier elemento de nuestra página y ese elemento, tendrá ese color de fondo.
Podemos especificar el color de fondo de tres forma diferentes:
- Colores sólidos de CSS (green, red, blue…)
- Colores RGB (255 255 0)
- Colores hexadecimales (#E0E0E0)
La sintaxis de background-color es: background-color: color;
9.3 Las imágenes de fondo
En CSS para aplicar una imagen de fondo a nuestra web, usamos la propiedad background-image. Esta propiedad se le puede aplicar a cualquier elemento de nuestra página y ese elemento, tendrá esa imagen de fondo.
La sintaxis de background-image es: background-image: url(ruta_img);
A la imagen de fondo le podemos aplicar diferentes propiedades:
Repetición del fondo
La propiedad background-repeat se usa para controlar el comportamiento de tipo mosaico de las imágenes. Los valores disponibles son:
- no-repeat: evita que el fondo se repita.
- repeat-x: repite horizontalmente.
- repeat-y: repite verticalmente.
- repeat: es el valor por defecto; repite en ambas direcciones.
Dimensionar la imagen de fondo
La propiedad background-size permite establecer un tamaño al fondo. A esta propiedad le podemos establecer un tamaño en porcentaje o pixeles.
También puedes utilizar alguna de estas palabras clave:
- cover: el navegador agrandará la imagen lo suficientemente grande como para que esta cubra por completo el área de la caja sin que pierda su relación de aspecto. En este caso, es probable que parte de la imagen quede fuera de la caja.
- contain: el navegador adecuará el tamaño de la imagen para que quepa dentro de la caja. En este caso, pueden quedar huecos a ambos lados o en la parte superior e inferior de la imagen si la relación de aspecto de la imagen es diferente de la de la caja.
Posicionar la imagen de fondo
La propiedad background-position te permite elegir la posición en la que aparece la imagen de fondo dentro de la caja a la que está asociada. Para ello se utiliza un sistema de coordenadas en el que la esquina superior izquierda de la caja es (0,0), y la caja se coloca sobre los ejes horizontal (x) y vertical (y).
Podemos combinar las palabras clave top, bottom, right y left para posicionar el fondo en esa posición.
- cover: el navegador agrandará la imagen lo suficientemente grande como para que esta cubra por completo el área de la caja sin que pierda su relación de aspecto. En este caso, es probable que parte de la imagen quede fuera de la caja.
- contain: el navegador adecuará el tamaño de la imagen para que quepa dentro de la caja. En este caso, pueden quedar huecos a ambos lados o en la parte superior e inferior de la imagen si la relación de aspecto de la imagen es diferente de la de la caja.
Degradados de fondo
Con CSS, también podemos crear fondos con degradados usando la propiedad gradient.
Diferentes tipos de gradient:
- Linear-gradient: El color se desvanece suavemente a lo largo de una línea imaginaria.
- Radial-gradient: Cuanto más lejos de un origen sea un punto, más lejos del color original será.
- Repeating-linear-gradient: Se repite el gradiente hasta llenar todo el fondo de forma lineal.
- Repeating-radial-gradient: Se repite el gradiente hasta llenar todo el fondo de forma radial.
A la hora de crear un gradiente, le podemos especificar la posición, la orientación, los colores y cuando ocupa cada uno de los colores.
Múltiples imágenes de fondo
CSS permite colocar todas las imágenes de fondo, las capas van del último elemento de la lista, al primero
Anclaje del fondo
A la hora de desplazarse por el sitio web, existe la propiedad background-attachment que define cómo se desplazan los elementos junto al fondo.
Esta propiedad tiene los siguientes métodos:
- scroll: Hace que el fondo del elemento se desplace cuando te desplazas por el contenido de la página. Si te desplazas por el contenido del elemento, el fondo no se mueve. El efecto resultante es que el fondo está anclado a la página en una posición fija, por lo que se desplaza a medida que la página se desplaza.
- fixed: Hace que el fondo de un elemento quede fijo con respecto a la ventana gráfica, de modo que no se desplace cuando te desplazas por la página o el contenido del elemento. Siempre permanece en la misma posición de la pantalla.
- local: Este valor se añadió posteriormente (solo es compatible con Internet Explorer 9+, mientras que los otros son compatibles con IE4+) porque el valor scroll es bastante confuso y en muchos casos no hace lo que deseas. El valor local ancla el fondo al elemento en el que está configurado, de modo que cuando te desplazas por el contenido del elemento, el fondo se desplaza con este.