Fondos

El fondo de una caja puede ser un color o una imagen y se visualiza solo en el área ocupada por el contenido y su relleno. Hay cinco propriedades para establecer el fondo de un elemento:

• background-color permite modificar el color de fondo de cualquier elemento. Su valor inicial es transparent
• background-image para mostrar una imagen como fondo

  
                            body{ background-image: url(“imag/fondo.jpg”)}
                          

  La imagen de fondo puede ser absoluta o relativa. Si la imagen contiene zonas transparente es posible ver el color de fondo. Se suele indicar color de fondo e imagen de fondo a la vez, por si la imagen no se ve correctamente en el navegador que tenga el color indicado para mostrarlo. Recomendable el mismo color si es posible que la foto. Si la imagen es demasiado grande se muestra solo la parte de imagen comprendida en ele tamaño del elemento. Si es demasiado pequeña esta imagen se repite horizontal y vertical hasta rellenar el elementos. Si se utiliza una imagen muy pequeña se consigue cubrir completamente el fondo de la página y se consigue un ahorro de ancho de banda.
• background-repet para controlar la repetición de una imagen, y tiene los valores:
  • repeat es el valor por defecto y repite la imagen tanto verticalmente como horizontalmente
  • no-repeat muestra la imagen una sola vez sin repetición
  • repeat-x repite horizontal
  • repeat-y repite vertical

              
                            #cabecera{ background-image: url(“imag/fondo.jpg”) repeat-x}
                          

• background-position se utiliza para controlar la posición de la imagen dentro del fondo de elemento. Para esto se indican dos porcentajes o dos medidas que representa el desplazamiento horizontal y el segundo el desplazamiento vertical. Si se asigna un solo valor de porcentaje o medida se asigna automáticamente el valor de 50% tanto horizontal como vertical. También se puede definir la posición de la imagen de fondo mediante palabras clave: top, left, center, bottom, right o combinación de ellas (top left, right bottom ).
• background-attachment para fijar el coportamiento de la imagen, que indica que el fondo permanezca fijo cuando la ventana del navegador se desplaza mediante barras de scroll. Es un comportamiento no deseable. Los valores que toma son: scroll (valor por defecto) y fixed que la imagen no se mueve al desplazar la ventana del navegador.

Todas estas propriedades se pueden agrupar con shorthand el orden siendo: color, url, repetición, posición. Se permite asignar todos o sólo algunos de los valores.

                  .img-real {
                    background: #222888 url(img/imagen.jpg) repeat-x 0 0;
                  }
                

Cuando se juntan dos o más márgenes verticales, se fusionan de forma automática y la altura del nuevo margen será igual a la altura del margen más alto de la que se han fusionado. De la misma forma, si un elemento está contenido dentro de otro elemento, sus márgenes verticales se fusionan y resultan en un nuevo margen de la misma altura que el mayor margen de los que se han fusionado.

En el caso de un elemento que se encuentra en el interior de otro y sus márgenes se fusionan de forma automática, se puede evitar este comportamiento añadiendo pequeño relleno padding:1px o un borde border:1px solid transparent al elemento contenedor.

Ejercicios resueltos en

Siguiente

Anterior