vagacode

Establecer el fondo de una etiqueta cualquiera es algo bastante común y no debería causar problemas si conocemos a forma en que funciona esta propiedad que, genéricamente, se define con background, con ella, podemos definir un color o una imagen como fondo de cualquier elemento.

Como muchas otras propiedades, esta es una forma abreviada de establecer varias simultáneamente:

background: color image repeat attachment position;

Cada una de esas partes puede ser declarada de modo individual; background-color es el color de fondo y se agrega aún cuando se quiera mostrar una imagen por dos motivos, el primero es que si la imagen es transparente podemos darle efectos colocando un color distinto al fondo y si no lo es, ese es el color que se mostrará cuando la imagen no se cargue o demore en ser cargada; de ese modo, si hay textos, estos serán legibles. El color de fondo puede ser expresado en cualquier formato, ya sea una palabra clave, un número hexadecimal o una función.

background-image determina cuál es la imagen de fondo a usar y su valor es una función que indica la dirección URL del archivo que contiene esa imagen; si queremos eliminarla, la dejamos vacía con url() o usando la palabra none.

background-repeat establece la forma en que tratará la imagen; por defecto el valor es repeat así que la imagen se repetirá como un mosaico en todas direcciones hasta ocupar el ancho y alto del elemento al que lo agregamos; esto es lo que solemos hacer para llenar un determinado espacio con una imagen pequeña. Un valor de no-repeat hará lo contrario, la imagen no se repetirá y es lo que usamos para mostrar un logo o cosas similares. Los otros dos valores posibles son repeat-x y repeat-y que repiten la imagen como mosaico pero sólo un una dirección, la primera, horizontalmente y la segunda, verticalmente.

background-position requiere dos valores que indican en que posición comenzará a ser mostrada esa imagen de fondo y por defecto son 0 0 o left top con lo que la imagen empezará en la parte superior izquierda del contenedor. Para indicar esa posición podemos usar palabras (top right bottom left), porcentajes o unidades; por ejemplo, si quisiéramos centrarla usaríamos 50% 50%.

background-attachment admite dos valores, scroll que es el valor por defecto y fixed que hará que la imagen quede fija, que ese fondo, permanezca estático cuando hacemos scroll sobre la página y, sólo tiene sentido usarlo si el fondo a llenar es más alto que la ventana del navegador, caso contrario, no veremos diferencia alguna; hagamos la prueba permutando el fondo de esta página por una imagen y viendo las diferencias.

Las propiedades comunes para agregar fondos a las etiquetas se han visto ampliadas por la irrupción del CSS3; no todas ellas se aplican de modo habitual pero, poco a poco, van extendiéndose. Una de las más difundidas es el uso de colores en formato RGBA que se diferencian de los colores comunes porque requieren un dato extra, esa A final indica la transparencia, un valor decimal que va desde 0 (totalmente transparente) a 1 (totalmente opaco); en este ejemplo usamos el mismo color (#00ffff) pero variamos la opacidad.

La propiedad background-clip controla la forma en que se muestran los fondos con relación a sus bordes o paddings y puede tener tres valores: border-box, padding-box o content-box que es la que más uso práctico puede tener ya que nos permite establecer paddings y no llenarlos con el fondo que es lo que ocurriría normalmente.

La propiedad background-size permite dimensionar las imágenes de fondo, algo que normalmente no podía hacerse y admite que utilicemos porcentajes, pixeles o palabras especiales como auto, cover y contain que establecen el modo en que la imagen se expandirá; si usamos cover lo hará ocupando todo el contenedor, con contain lo hará ocupando solo el alto o el ancho con lo que la imagen no se deformará.

background-origin define desde dónde comenzará a mostrarse la imagen y por defecto es padding-box así que si la etiqueta tienen un padding y un borde, la imagen abarcará el padding pero no el borde; con border-box, la imagen abarcará el borde pero no el padding (quedará por debajo del borde) y con content-box no incluira a ninguno de los dos.

Tal vez, la caracterísitca más interesante de estas nuevas propiedades sea la posibilidad de agregar varias imágenes de fondo en un mismo elemento. Para esto, no hacen falta propiedades diferentes sino que se usan las misma y los valores, se separan por comas; por ejemplo, de este modo:

background-color: white;
background-image: url(URL_image1), url(URL_image2);
background-position: 50% 50%, 0% 0%;
background-repeat: no-repeat, repeat;

Cada imagen la controlamos de modo individual y se muestran como capas ordenadas, la primera es la que está más abajo y la última es la que está más arriba por lo tanto, si se superponen. debemos tener en cuenta ese detalle.

La cantidad de imágenes a usar no está definida, en el ejemplo de la izquierda se usan dos y en el de la derecha tres.