background: Los fondos y lo nuevo

Las propiedades comunes para agregar fondos a las etiquetas se han visto ampliadas por la irrupción del CSS3 ya que en los navegadores modernos, hay muchas alternativas extras con las que antes no contábamos e incluso, ni imaginábamos.

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 extro, 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 blanco y variamos esa opacidad:

#unelemento { background-color: rgba(255,255,255,0.5); }

background-color: rgba(255,255,255,alfa);

Si se usa Internet Explorer 8, hay una forma de simular ese mismo efecto utilizando filtros pero el resultado sólo será aceptable si se usa con prudencia ya que los filtros son relativamente lentos.

Las nuevas propiedades del CSS3 también nos amplían las posibilidades de las imágenes de fondo.

background-clip controla la forma en que se muestran los fondos con relación a sus bordes o paddings y puede tener res 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.

normal

content-box

background-size nos permite dimensionar las imágenes de fondo, algo que hasta ahora, 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 el total, contain lo hará ocupando solo el alto o el ancho con l oque la imagen no se deformará:

background-size: 150px auto;

background-size: cover;

background-size: contain;

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 (quedrá por debajo del borde) y con content-box no incluira a ninguno de los dos:

background-origin: padding-box;

background-origin: border-box;

background-origin: content-box;

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 propeidades 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(IMAGEN_1),url(IMAGEN_2);
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, así que debemos tener en cuenta este detalle si es que se superponen.

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