CSS3 05 Fondos

 CSS3 05 Fondos

Imágenes de fondo

Si no quieres un color plano de fondo, sino que prefieres utilizar una imagen, puedes utilizar la propiedad background imageimage. En el valor, se introducirá el nombre de la imagen o la dirección donde está alojada, siempre rodeado del texto url().

En el caso de que sólo se coloque el nombre de la imagen (por ejemplo, imagen.jpg), el navegador buscará la imagen en la misma carpeta donde está el archivo CSS. Esto es lo que se llama ruta relativa. En el caso de que se coloque la ruta completa, por ejemplo https://miurl.com/img/logo.png, se accederá a la imagen alojada en esa dirección. 

Esto es lo que se llama ruta absoluta.

    

NOTA: En el caso de que no se encuentre la imagen o el valor de background-image se haya establecido a none, no se utilizará ninguna imagen de fondo, y en su lugar se mostrará el color establecido con background-color.

Por otro lado, una vez establecida una imagen de fondo con background-image, se puede personalizar la forma en la que se mostrará dicha imagen mediante propiedades como background-repeat, background-attachment o background-position:

    

La propiedad background-repeat especifica si la imagen se repetirá horizontalmente (repeat-x), si se repetirá verticalmente (repeat-y), si lo hará en ambas direcciones (repeat) o en ninguna (no-repeat). Por defecto, si no se indica nada, esta propiedad está ajustada en repeat.

La propiedad background-attachment especificará si la imagen de fondo seguirá el desplazamiento del usuario (scroll, el comportamiento por defecto) o por el contrario, se quedará fijado y no se moverá (fixed), mientras el usuario se desplaza por la página.

Por último, background-position coloca la imagen en la zona especificada por PosX y por PosY. Por defecto, esos valores son 0% 0%, pero pueden especificarse con unidades (porcentajes, píxels, etc...) o mediante palabras clave que representan zonas predefinidas (top, left, right, bottom y center). Si sólo se especifica un valor, se tomará para el eje x, mientras que el valor del eje Y será automáticamente establecido a center (o 50%).

Atajo: Imágenes de fondo

Es posible establecer todas las propiedades anteriores en una sola regla de CSS a modo de atajo, y así ahorrar mucho espacio en escribir las propiedades anteriores por separado. Aunque no es estrictamente obligatorio, se aconseja respetar el siguiente orden (acostumbrarse a usar el mismo orden es una buena práctica):

        div {

                background: <color> <image> <repeat> <attachment> <position>

                    }

Por ejemplo:

        div {

                background: #FFF url(imagen.jpg) repeat-x scroll top left;

                    }

Y con esto, ya conocemos las ventajas básicas de CSS a través de propiedades tan interesantes como background-color o background-image. Sin embargo, la llegada de CSS3 incorporó novedades muy interesantes en nuestros navegadores, que mediante versiones anteriores a CSS3 no era posible realizar (o era algo bastante complejo).

Opacidad

Es posible utilizar la propiedad CSS3 opacity para establecer una transparencia total sobre el elemento indicado. El valor a indicar es un número entre 0 (completamente transparente) y 1 (completamente visible).

        div {

                background-color: #FF0000;

                color: #FFFFFF;

                opacity: 0.5;

                    }

Como se puede ver en la imagen, esto hará que la capa div (el recuadro rojo) se muestre al 50% de opacidad, con color de texto blanco (en el caso de existir texto) y fondo de color rojo. Si buscamos una transparencia parcial (color de fondo transparente que no afecte al texto) debemos utilizar los valores RGBA o HSLA (canales alfa) en la propiedad background-color:

        div {

                color:white;

                background-color: RGBA(255, 0, 0, 0.5);

                    }

De este modo, sólo aplicamos la transparencia al color de fondo, mientras que con opacity se aplica a toda la capa en sí, por lo que afecta a todos los elementos que están dentro de la capa.

Fondos múltiples

CSS3 ofrece nuevas características a la hora de utilizar imágenes de fondo, como por ejemplo la posibilidad de establecer múltiples imágenes de fondo de forma simultánea:

        div {

                background-image: url(manz.png), url(fondo2.jpg), url(fondo3.jpg);

                background-repeat: no-repeat, repeat-x, repeat;

                    }

esta forma, se pueden utilizar varias imágenes y superponerlas una sobre otra (especialmente interesante si la primera imagen de fondo está en formato PNG, la cuál soporta transparencias), e incluso aplicarle diferentes propiedades de repetición o posicionamiento a cada una, como se puede ver en el ejemplo anterior.

Además, CSS3 también añade nuevas propiedades para especificar como cubrirá la imagen de fondo al elemento en cuestión:    

La propiedad background-clip establece la forma en la que el color o la imagen de fondo cubrirá el elemento, mientras que la propiedad background-origin intenta posicionar el comienzo de la imagen de fondo, útil con imágenes. La primera utiliza border-box como valor por defecto, mientras que la segunda utiliza padding-box.

Ambas propiedades pueden tomar uno de los siguientes valores:      

Consejo: Una buena forma de darse cuenta del funcionamiento de estas propiedades es establecer un borde grueso punteado. Usando border-box la imagen de fondo se extenderá en todo el elemento, incluyendo borde, espaciado y contenido. El valor padding-box extenderá la imagen de fondo sólo mediante el padding y el contenido, y por último, la propiedad content-box extenderá la imagen de fondo sólo en la zona del contenido.

Por último, la propiedad background-size ajusta el tamaño (ancho y alto) de la imagen de fondo, por si deseamos escalarla. Por defecto, una imagen de fondo toma automáticamente el tamaño de la imagen (que podría ser demasiado grande, por ejemplo). Para no tener que modificar la imagen original, podemos utilizar esta propiedad y ajustarla mediante CSS:    

Además de unidades de medidas como píxeles o porcentajes, podemos utilizar las siguientes palabras clave:

- auto: No escala la imagen. Utiliza el tamaño original de la imagen.
- cover: Escala el ancho de la imagen para adaptarse al ancho del elemento.
- contain: Escala el alto de la imagen para adaptarse al alto del elemento.

Los dos últimos valores (cover y contain) sólo pueden utilizarse en el caso de que se especifique un sólo parámetro como valor en la propiedad background-size.

Atajo: Imágenes de fondo CSS3 Los navegadores que soportan CSS3, incluyen una nueva propiedad background de atajo que permite incluir los valores de propiedades CSS3 como background-clip, background-origin o background-size. El orden aconsejado para adquirir buenas prácticas es el siguiente:

  div {
      background: <color> <position> <size> <repeat> <origin> <clip> <attachment> <image>
        }
Por ejemplo:
  div {
    background: #FFF top left cover repeat-x padding-box border-box scroll url(imagen.jpg);
        }