Para maquetar una página web, muchas veces es necesario utilizar los fondos de los elementos como parte de la distribución de los mismos, sobre todo porque colaboran generando efectos visuales que hacen posible distinguir la estructura del documento o bien como forma de establecer contraste, o simplemente como parte del decorado.
Cuando se emplea un color, el color de fondo ocupa toda la extensión del elemento. Pero un caso muy diferente es el empleo de imágenes como fondo, dado que se trata de un elemento en sí mismo y que por consiguiente, tiene algunas propiedades que hace que su tratamiento sea particular.
Repetición de la imagen de fondo
Cuando establecemos una imagen como fondo, ésta se repite en los dos ejes del elemento (ancho y altura) hasta cubrir toda la extensión del mismo. Este es el valor por defecto que tiene la propiedad “background-image”.
Este valor de repetición puede ser alterado mediante otra propiedad, llamada “background-repeat”, donde puede establecerse que la imagen aparezca repetida en los dos ejes (valor por defecto), en uno de ellos, o que no se repita.
Veamos como funciona esto con ejemplos prácticos. Para ello, deberemos crear un documento XHTML mediante el siguiente código:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >En este documento, solo estableceremos el Doctype del mismo, el título y el link que establece el vínculo entre el documento HTML y el archivo CSS. Esto quiere decir que también deberemos crear un archivo CSS, el que guardaremos en el mismo directorio que el documento HTML.
También será necesario que descarguen un juego de imágenes adecuadas para el ejemplo:
Luego, en el archivo CSS, deberemos colocar las siguientes líneas, donde se establece el color de fondo y la imagen de fondo:
body {
background-color: #fff;
background-image: url(imagenes/fondo2.jpg);
background-repeat: repeat;
}
Luego de guardados ambos archivos, abriremos el documento HTML con nuestro navegador, donde veremos una página ocupada por la repetición de la imagen seleccionada.
Posteriormente, cambiaremos el nombre de la imagen que hemos seleccionado para el fondo por la imagen “fondo1.jpg” y en “background-repeat” colocaremos el valor “repeat-x”.
Una vez guardados los cambios realizados en el archivo CSS, recargaremos la ventana del navegador, en la que se mostrará una página con una guarda que abarcará todo el ancho de la página. Esto es así porque el valor “repeat-x” provoca que la imagen se vea repetida solo en el plano horizontal.
En el caso de que se quiera establecer una imagen de fondo cuya repetición suceda en el plano vertical, el valor a introducir sería “repeat-y”.
Por último, cambiaremos la imagen de fondo por “fondo3.jpg” y daremos el valor “no-repeat” a la propiedad “background-repeat”, con lo que en el navegador aparecerá un mapamundi como una especie de marca de agua.
En este caso, hemos indicado que la imagen de fondo no debe repetirse, con lo que la imagen aparecerá una sola vez.
Método abreviado
Como en muchos otros casos, la propiedad “background” puede abreviarse, indicando varias propiedades con sus respectivos valores en una sola línea de comando.
Por ejemplo, para los casos descritos anteriormente, podría resumirse:
body {
background: #fff url(imagenes/fondo2.jpg) repeat;
}
body {
background: #fff url(imagenes/fondo1.jpg) repeat-x;
}
body {
background: #fff url(imagenes/fondo3.jpg) no-repeat;
}
Importante: El espacio en blanco entre los valores de las propiedades, debe mantenerse, ya que opera como separador de las mismas.
Posición de la imagen de fondo
La imagen de fondo puede ser empleada en muchos casos como forma de dar una apariencia determinada a algunas capas. Con mucha frecuencia se emplea en la creación de botones de menús, encabezados, ubicación de elementos, etc.
La posición de las imágenes de fondo se determina mediante la propiedad “background-position”, y solo es aplicable a los elementos de bloque. Para determinar dicha posición, se pueden emplear palabras clave como valores (left, center, right para la determinación de la posición en el eje horizontal; top, center y bottom para la posición en el eje vertical).
También es posible establecer la posición mediante el empleo de medidas en unidades de longitud (px, pt, cm, em, etc.) y porcentajes.
En todos los casos, se coloca en primer lugar el valor de la posición horizontal y luego la vertical. En el caso de que se empleen palabras clave, el orden puede ser alterado, ya que los navegadores interpretarán en forma correcta la posición. También la propiedad “background-position” puede ser abreviada introduciendo los valores en la propiedad “background”.
Está permitido emplear unidades de longitud diferentes para la determinación de las dos posiciones. Lo que no está permitido, es el empleo de palabra clave en una de las posiciones, mientras se emplea una longitud en la otra posición.
El valor por defeco de esta propiedad es “top left”, o lo que es equivalente, “0px 0px” o “0% 0%”.
Veamos ahora algunos ejemplos prácticos, para lo que emplearemos los mismos archivos de ejemplo que en el ejemplo sobre la repetición de fondos:
body {
background-color: #fff;
background-image: url(imagenes/fondo3.jpg);
background-repeat: no-repeat;
background-position: 100px 100px;
}
Como puede verse, a la imagen única de fondo, se le han dado los valores “100px 100px”, lo que hará que la imagen de fondo se vea desplazada 100px. Luego, podremos modificar los valores, las unidades y podremos aplicar palabras clave en el posicionamiento del fondo.
Sintaxis abreviada
Al igual que en el caso de la aplicación de la propiedad de repetición de la imagen de fondo, el posicionamiento del fondo puede abreviarse e introducirse en la propiedad “background”.
El ejemplo que hemos dado anteriormente, puede abreviarse utilizando la siguiente sintaxis;
body {
background: #fff url(imagenes/fondo3.jpg) 100px 100px no-repeat;
}
Utilización de fondos en la maquetación
Existen muchas formas de aprovechar el posicionamiento de las imágenes de fondo durante el proceso de maquetación de una página web. Una de ellas, es la formación de capas con bordes redondeados de distintos tamaños empleando una única imagen.
Para ello, en el ejemplo siguiente, utilizaremos para formar tres barras horizontales con esquinas redondeadas solo la siguiente imagen:
Para conformar las tres barras, agregaremos al código HTML que ya tenemos, las siguientes líneas entre las etiquetas <body> y </body>:
<div class="capa1">
<div class="subcapa1">
<p>Título de ejemplo</p>
</div>
</div>
<div class="capa2">
<div class="subcapa2">
<p>Título de ejemplo</p>
</div>
</div>
<div class="capa3">
<div class="subcapa3">
<p>Título de ejemplo</p>
</div>
</div>
Como pueden ver, se trata de párrafos dentro de una capa que se encuentra anidada en otra. En el archivo CSS, agregaremos las siguientes líneas:
.capa1, .capa2, .capa3 {
width: 300px;
height: 30px;
margin-top: 30px;
background: url(imagenes/fondo4.jpg);
}
.subcapa1, .subcapa2, .subcapa3 {
width: 270px;
height: 30px;
background: url(imagenes/fondo4.jpg) right;
float: right;
}
.subcapa1 p, .subcapa2 p, .subcapa3 p {
text-align: center;
margin: 8px 0 0 -30px;
color: white;
font: normal 15px arial, helvetica, sans-serif;
}
.capa2 {
width: 150px;
}
.subcapa2 {
width: 120px;
}
.capa3 {
width: 400px;
}
.subcapa3 {
width: 370px;
}
En estas líneas de código, vemos que las capas anidadas tienen 30px menos que las capas padre (esto es para que sea visible la esquina izquierda de la capa padre) y que flotan a la derecha.
En la siguiente imagen, veremos como es que se colocan una capa y la otra, de forma tal que, montadas, queda el efecto deseado:
Mediante la aplicación de un margen negativo a la izquierda en el párrafo anidado, se corrige la diferencia de ancho, de forma tal que el título no se muestre a 30px a la derecha, como sucedería si no se aplicara esta corrección.
Este que hemos mostrado, es uno de los ejemplos más simples de la utilización del posicionamiento de fondos en la maquetación. Las posibilidades que ofrecen las propiedades que hemos descrito, son muchísimas, y basta con aplicar un poco de imaginación, para poder obtener resultados atractivos y originales.
modificado el 3 junio, 2018 14:29