Propiedades básicas para el manejo de CSS3: Fondos (parte 3)

Tercera parte de una serie que expondrá las propiedades más utilizadas de CSS3, en esta parte nos enfocamos a la estilización de fondos.

El fondo o “background” es uno de los elementos más subestimados a la hora de diseñar nuestro sitio web, muchas veces cometemos el error de no darle la importancia necesaria y continuamos sin identificar la relevancia que este tiene sobre el entorno, ya que él solo puede causar un completo desentono ambiental o nos puede ayudar a crear la armonía entre el resto de los elementos.

Después de manejar el texto y las capas a nuestro favor, el fondo puede parecer intrascendente, pero si lo manejamos mal el resto de los elementos no lucirán. Imagina que tienes un sitio que maneje capas de color azul eléctrico y uses un fondo de color rojo chillante, al menos que estés haciendo una página de Mario Bross, esto nunca lucirá bien y es por ello que debes aprender a combinar tu fondo con el resto del sitio.

Con esta serie de elementos que pondremos en práctica, podemos darle un toque más adecuado a nuestros fondos, olvidándonos de los trucos o hacks que usábamos en el pasado para que el fondo se adaptará y funcionará como queríamos, además aprenderemos técnicas que anteriormente nada más eran posible realizarlas mediante un editor de imágenes.

Fondos múltiples con CSS3

Uno de los principales obstáculos que nos encontrábamos en el pasado, era el no poder desplegar más de una imagen a la vez en nuestros fondos, esto cambia con CSS3. No es precisamente una práctica recomendada, ya que puede causar contrastes no adecuados, pero debemos admitir que el hecho de poder usar varias imágenes de fondo nos abre una gama de posibilidades para poner en práctica nuestra creatividad.

Creemos un ejemplo sencillo, supongamos que tenemos dos imágenes de LaWebera.es y queremos agregarlas como fondo de nuestra capa principal, simplemente estructuramos un código como el siguiente:

.lawebera {
	border: 1px solid #000;  
	height: 150px;
	width: 400px;
	background: url("https://www.lawebera.es/images/logo.gif") 0 0 no-repeat,  
	url("https://www.lawebera.es/images/servicios-webera-boton.png") 100% 0 no-repeat #000; 
}

Donde indicamos que la imagen “logo.gif” estará ubicada en la parte izquierda de nuestro fondo mientras que “servicios-webera-boton.png” ocupará la parte derecha. Esto solo se aplicará para aquellos div que tengas asignada la clase “lawebera”.

Tamaño del fondo

Anteriormente era difícil poder adaptar una imagen para que se mostrará de manera extendida en nuestro fondo, debíamos aplicar ciertos trucos para poder lograr este efecto y al final muchas veces no se conseguía lo esperado.

Muchas veces buscamos poder tener una sola imagen extendida como fondo, y para ahorrar recursos, ancho de banda y demás factores, utilizamos imágenes de tamaño relativamente pequeño, por lo que necesitamos adaptarla para que se muestre en toda la ventana. Basta con utilizar un par de líneas de código para aplicar esta técnica:

   background: url("https://www.lawebera.es/images/header.png") no-repeat;  
   background-size: 100% 100%; 

La sentencia “background-size” aceptará dos parámetros que serán las dimensiones de la imagen de fondo (x, y). Hay que aclarar que este bloque de código únicamente funcionará en Chrome y Safari, si queremos agregar esta funcionalidad para el resto de los navegadores debemos crear un código como el siguiente:

 body, html { height: 100%; }  
body{
	background: url('https://www.lawebera.es/images/header.png') no-repeat;
	background-size: 100% 100%;  
	-webkit-background-size: 100% 100%; 
	-moz-background-size: 100% 100%;  
	-o-background-size: 100% 100%;
	padding:45px;
}

>>> Aquí puedes ver el ejemplo de CSS3 en funcionamiento <<<

Esta es una técnica que aún tiene mucho potencial de refinamiento y mejora, pero por el momento se ha convertido en una gran utilidad.

Fondos difuminados y gradientes

Como consejo, trata de utilizar técnicas relacionadas al manejo de colores en el fondo, no necesariamente debemos de poner una imagen para lograr obtener un buen efecto en nuestro sitio, muchas veces estas pueden obstaculizar o estropear nuestro proceso, e incluso pueden hacer pesada la descarga, es por ello que es recomendable aprender a manejar los colores.

Si deseas aprender más sobre gradientes y fondos con varios colores te recomendamos que visites el enlace anterior.