Fondos con CSS

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:

• border-box: La imagen de fondo se ajusta al lado externo del borde
• padding-box: La imagen se ajusta a la posición en la que empieza el padding (lado interno del borde), dejando sin cubrir el espacio de los bordes.
• content-box: La imagen se ajusta después del espacio de padding, dejando toda la parte del borde y el padding sin cubrir.

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:

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:

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:

• background-color
• background-image
• background-repeat
• background-position
.

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;
		}