Fondos con CSS

La propiedad fondo(background) permite definir el estilo de fondo cualquier elemento del modelo de caja en HTML. Con ella podemos establecer el color de fondo del elemento, pero también podemos definir una o varias imágenes de fondo, además de controlar la posición y comportamiento de estas imágenes.
Por ejemplo podemos definir si la imagen se va a repetir o no sobre el fondo del elemento, y en qué dirección queremos que se repita. O si va a estar fija en la pantalla o desaparecerá cuando hagamos scroll en el documento, o qué espacio del fondo debe cubrir, entre otras cosas.

Background-color

A la hora de definir el color de fondo de un elemento, además de su valor hexadecimal, CSS nos permite usar la definición de color RGB. Esta definición puede ser en valores pocentuales o en valores de 8bits.
Un ejemplo puede ser background-color: rgb(0,0,255);

Además tenemos la posibilidad de definir transparencia al color de fondo, añadiendo un canal alfa, que tiene valores de 0 a 1, donde 0 es totalmente invisible, y 1 totalmente visible.

Por ejemplo, en estos párrafos que se superponen sobre la imagen de lluvia asignada al fondo del div.fondo-fix hemos definido un fondo semitransparente para que se pueda leer el texto usando el siguiente CSS:


.fondo-fix p {
	background-color: rgba(255,255,255,.7);
	...
}					
				

El valor de la opacidad puede definirse con el modelo de color RGB, añadiendo un cuarto canal, que es el alfa, y que establece la opacidad (o transparencia) con valores decimales: 0 es totalmente transparente (no se ve el color aplicado), 1 totalmente opaco (no se ve el elemento de detrás), y 0.5 un valor semitransparente.

Además puede ser definido en modelo hexadecimal, simplemente añadiendo un par de dígitos al final de los pares que definen el color. Es par, también hexadecimal, define la transparencia total como 00, y la opacidad como FF, siendo los valores intermedios los semitransparentes. Un ejemplo para color blanco semitransparente aplicado de forma hexadecimal sería: background-color: #FFFFFF99;.

También se puede definir en el modelo HSL (tono, saturación y brillo) añadiendo un cuarto valor a los tres que definen el color. Este último valor representa el nivel de opacidad, y lo hace igual que en el modelo RGB, con valores desde cero a 1. La definición en este caso sería así: background-color: hsla(0deg, 100%,50%, 0.5 );

Propiedad background-image

La propiedad con la que definimos una imagen de fondo mediante CSS es background-image, en ella definimos la ruta dónde se encuentra la imagen a mostrar, de la siguiente forma: url('imagen_fondo.jpg').

De esta forma conseguimos que la imagen se muestre en el documento, pero en este caso la imagen no es un elemento del DOM (no es un nodo HTML), puesto que no estamos usando la etiqueta <img> para insertarla en el documento. Las imágenes de fondo están asociadas a los elementos HTML que las contienen, que pueden ser prácticamente cualquiera de las etiquetas HTML disponibles. Y para modificarlas y manipularlas nos tenemos que referir al CSS del elemento contenedor de la imagen.

Un uso muy habitual es para aplicar patrones de fondo a toda la página, consiguiendo el efecto de un tapiz que cubre toda la pantalla. Para eso sólo tenemos que aplicar una imagen de fondo al elemento body y hacer que esta se repita. En realidad para que se repita la imagen no tenemos que hacer nada en especial, puesto que es el comportamiento predeterminado del navegador.

En este documento hemos aplicado este CSS al body para conseguir el fondo que vemos:


body {
	background-image: url('fondo/fondo.jpg');

}
				

Background-attachment

La propiedad background-attachment define cómo se comportará una imagen de fondo en cualquier elemento. Los dos valores importantes que podemos usar con esta propiedad son scroll y fixed. El primero hace que la imagen se mueva con el scroll de pantalla de forma que puede llegar a desaparecer si este es lo bastante grande. La segunda hace que la imagen quede fija en el fondo al hacer scroll en la pantalla, creando el efecto de que el texto o contenido de la web pasa por encima de la imagen.

Background-repeat

Por defecto cualquier imagen aplicada como fondo de un contenedor se repetirá a lo largo de este, hasta cubrir todo su espacio. Tanto en horizontal como en vertical.
Si queremos cambiar este comportamiento, recurrimos a la propiedad background-repeat, que podemos definir con los siguientes valores:

Para conseguir el efecto de la imagen que se mantiene fija en el fondo de este apartado, hemos aplicado el siguiente formato CSS:


.fondo-fix {
	background-image: url('fondo/lluvia.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
}
				

Hay que tener en cuenta que la imagen está sobre un elemento que forma parte del contenido del documento, pero no en el fondo del documento. Por eso cuando llegamos al final de ese contenido la imagen desaparece para que siga el resto del documento. Si queremos que la imagen se mantenga en el fondo durante el scroll de todo el documento tendríamos que aplicarla al elemento principal del documento, que es el body. En este caso como el div.contenedor coincide con el body, también habría bastado con definirlo ahí.

Galería de Imágenes

Un uso de las imágenes de fondo puede ser el de generar una galería sin usar la etiqueta <img>. En su lugar generamos un elemento <div> para cada imagen y mediante CSS asignamos las imágenes.
Ejemplo:


<div class="cont-imgs">
	<div id="foto1" class="galeria"></div>
	<div id="foto2" class="galeria"></div>
	<div id="foto3" class="galeria"></div>
	<div id="foto4" class="galeria"></div>	
</div>

Y este CSS


.galeria {
	width: 300px;
	height: 300px;
	border:1px solid;
	margin: 49px;
	float: left;
	background-repeat: no-repeat;
}
#foto1 {
	background-image: url('fondo/galeria1.png');
}
#foto2 {
	background-image: url('fondo/galeria2.jpg');
}
#foto3 {
	background-image: url('fondo/galeria3.jpg');
}
#foto4 {
	background-image: url('fondo/galeria4.png');
}

Nos generan:

Background-size

Esta propiedad permite definir un tamaño de imagen diferente a las medidas de la propia imagen. Podemos definir el tamaño en valores numéricos separados por un espacio para el ancho y el alto respectivamente. Aunque si sólo definimos uno de ellos, el otro se calcula automáticamente manteniendo la proporción de aspecto de la imagen.

Además tenemos las palabras o valores clave contain y cover. La primera hace que la imagen se ajuste al contenedor por el primer lado que coincida (ancho o alto), y para ello escala la imagen si es necesario, pero siempre manteniendo su proporción. El segundo hace que la imagen cubra por completo el fondo del contenedor, para ello escala la imagen también, pero en caso de que las dimensiones del contenedor no sean proporcionales a las de la imagen, recortará parte de la imagen al encajarla en el contenedor.

Con este CSS


<div class="fotos" id="foto_gr"></div>
.fotos {
	width: 700px;
	height: 700px;
	border: 1px solid;
	background-image: url('fondo/lluvia.jpg');
	background-repeat: no-repeat;
	background-color: antiquewhite;
	margin: auto;
	}
#foto_gr {
	background-size: 90%;
	background-position: center;
}		

Conseguimos:

Y asi


<div class="fotos" id="foto_cover"></div>	

#foto_cover {
	background-size: cover;
}

Vemos

Mientras que así


<div class="fotos" id="foto_contain"></div>

#foto_contain {
	background-size: contain;
}

Vemos

Background-position

Por defecto las imágenes se sitúan en la esquina superior izquierda del contenedor, y desde ahí se repetirán para cubrir todo el espacio disponible.
Si queremos cambiar el comportamiento, definimos la propiedad background-position, que permite ubicar la imagen en valores absolutos (medidas en píxeles o porcentajes), o la podemos ubicar usando las palabras clave top, center, bottom, left y right.

Background-origin

Esta propiedad permite establecer la posición que ocupa la imagen en el modelo de caja del contenedor. Este modelo siempre establece tres posciones diferentes:

Si el contenedor no tiene definidos los bordes ni el padding, los tres elementos coinciden. Y en caso de ser definidos se toma cada uno de ellos según sus dimensiones.


#origen {
	width: 700px;
	height: 350px;
	border: 30px solid rgba(255,255,255,.7);
	padding: 50px;
	background-image: url('fondo/lluvia.jpg');
	background-repeat: no-repeat;
	background-size: 400px;
	background-origin: border-box;
}

Nos muestra:

Background-clip

Esta propiedad hace lo mismo que background-origin para las imágenes, pero aplicada al color de fondo del contenedor. Su comportamiento es el mismo, y sus valores son idénticos.

Aplicar varias imágenes de fondo a un mismo elemento

Se puede aplicar varias imágenes al mismo elemento utilizando las mismas propiedades CSS que hemos visto. Lo único que tenemos que hacer es separar mediante comas los valores de cada imagen en las propiedades que definamos.


#doble {
	width: 700px;
	height: 700px;
	border: 1px solid;
	background-image: url('fondo/galeria2.jpg'), url('fondo/galeria3.jpg');
	background-repeat: no-repeat;
	background-size: 300px, 350px;
	background-position: top left, bottom right;
	margin: auto;

}

Nos devuelve:

Fondos Degradados con CSS3

La propiedad background también permite definir un color de fondo degradado, entre dos o más colores a cualquier elemento. Además, como en cualquier aplicación de diseño gráfico de hoy en día, permite que los colores del degradado tengan diferentes valores de opacidad.

La forma de definirlo es similar a como lo definimos en cualquier aplicación de diseño: Estableciendo las detenciones (o puntos de cambio) de color, su opacidad en cada detención, el estilo del degradado (lineal o radial) y su dirección.

Este trabajo es algo que se hace mucho mejor de forma visual que mediante los valores numéricos correspondientes, por lo que resulta muy útil en este caso, recurrir a algún servicio que mediante una interfaz visual nos permita generar el degradado deseado, y nos devuelva el código CSS correspondiente para insertarlo en nuestra hoja de estilos.

Una de estas aplicaciones es la herramienta Gradient Editor, de Colorzilla. Es un servicio muy completo que permite generar el CSS necesario para nuestro degradado. Tiene muchas opciones de configuración y resulta muy sencillo de utilizar. Además, desde la misma web de Colorzilla podemos instalar un colorpicker en nuestro navegador, herramienta que nos resultará muy útil en la edición de color de nuestros documentos. La dirección de la web del editor de degradado de Colorzilla es esta: http://www.colorzilla.com/gradient-editor/

En ella sólo tenemos que definir nuestro degradado, copiar el CSS generado y pegarlo dentro de nuestra clase CSS para aplicarlo a los elementos que necesitemos.

Ejemplo


	<div class="columna deg-playa">

	

Y el CSS

.columna { margin: auto; border: 1px solid; width: 80%; height: 350px; } .deg-playa { background: #7db9e8; background: -webkit-linear-gradient(#7db9e8 0%, #e5e5e5 68%, #f4bd30 100%); background: -o-linear-gradient(#7db9e8 0%, #e5e5e5 68%, #f4bd30 100%); background: linear-gradient(#7db9e8 0%, #e5e5e5 68%, #f4bd30 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#f4bd30',GradientType=0 ); }

Devuelve

Propiedad abreviada (shorthand)

La propiedad background se puede abreviar resumiendo en una sola entrada el valor de:

Por ejemplo:
.imagen {background: red url('foto.jpg') no-repeat center;}

Texto con color degradado

A día de hoy no es un estándar de CSS, pero se puede generar un efecto de relleno de texto degradado sin usar ningún tipo de imagen. Aunque sólo está disponible para los navegadores con soporte para webkit y para Firefox.

La forma de hacerlo es relativamente sencilla: Se aplica un color de fondo degradado al elemento en cuestión, se usa el propio texto como máscara de recorte del fondo, y se le aplica un color transparente al texto para que permita ver el fondo degradado de detrás.

La primera y tercera propiedades son estándar de CSS, tanto el fondo degradado, como hemos visto más arriba, como el color transparente. En cambio, la propiedad para hacer que el texto sirva de recorte al fondo no es éstandar y necesita ser definida de forma específica para cada navegador. En el caso de Firefox usamos la misma propiedad background-clip, con el valor text. Y para webkit usamos la misma propiedad, pero con prefijo: -webkit-background-clip, y el mismo valor text.
Hay que tener en cuenta que Chrome y demás navegadores webkit sí reconocen esta propiedad para sus valores estándar (border-box, padding-box, content-box) y por lo tanto no es necesario usar el prefijo -webkit- si queremos definir alguno de estos valores. Es necesario cuando tengamos que definir su valor como text, que es el no estándar.

Por último, indicar que se puede conseguir el mismo efecto si en lugar de un degradado de fondo, usamos una imagen de fondo. Mediante la propiedad background-clip conseguimos que el texto recorte a la imagen, generando un efecto visual interesante.

Ejemplo

Titular con efecto de texto degradado

Con este código


	.txt-deg {
		border: 0;
		font-size: 3rem;
		font-family: sans-serif;
		background: linear-gradient(#7db9e8 0%, #e5e5e5 45%, #f4bd30 100%);
		/* Para webkit */
		-webkit-background-clip: text;
		/* Para FF */
		background-clip: text;
		color: transparent;
	}