Unidad 10. CSS. Unidades. Color. Margen. Fondo. Borde (IX)

10.8. Fondo

En este vídeo explicamos la imagen de fondo:

Dentro del modelo de cajas el fondo está formado por dos elementos opcionales, la imagen de fondo y el color de fondo. El contenido está delante de ambos. Por defecto, tanto la imagen como el color de fondo llegan hasta el border, a continuación tenemos el margin que separa esta caja de las adyacentes. En el siguiente esquema hemos representado todos estos elementos.

 

 

El contenido, la imagen de fondo y el color de fondo no pueden sobrepasar el border, que puede ser de color o transparente.

Como ya hemos visto entre el contenido y el border puede existir el padding. El padding es transparente.

Entre el border y la siguiente caja puede existir un margin que es siempre transparente.

El contenido está siempre delante pero si tiene áreas transparentes, se puede ver lo que hay detrás. Por ejemplo el texto de las etiquetas p es transparente entre los caracteres y permite ver la imagen de fondo. Está a su vez puede tener áreas transparentes que permitan ver el color de fondo.

Por ejemplo, el siguiente párrafo tiene una imagen de fondo más grande que el área de contenido, por lo tanto la imagen se recorta. Además no se ve el color de fondo ya que la imagen no tiene zonas transparentes.

 

En cambio en el siguiente párrafo sí se ve el color de fondo ya que la imagen de fondo es más pequeña que el área de contenido y además hemos indicado que no se repita y se alinee a la derecha. A continuación vamos a ver cómo trabajar con los atributos de las imágenes de fondo que permiten hacer estas cosas.