articulos css

HTML5 nos ha brindado nuevas propiedades para background, convirtiendo a esta etiqueta en una herramienta realmente potente, que nos va a permitir crear diseños realmente impresionanetes, usando simplemente CSS3.Empecemos viendo el comportamiento básico de background:

<style>
.estilo{
   background: #CCC;
}
</style>
<div class="estilo">TEXTO</div>

Con este ejemplo, lo que hemos hecho, ha sido colorear el fundo del contendor "estilo" de color gris (#CCC). Ahora veamos, como añadir una imagen, en vez de un color:

<style>
.estilo{
   background: url(imagen/fondo.jpg);
}
</style>

Ahora, hemos sustituido, el color de fondo por una imagen, usando el parámetro url(). Ambas opciones no son excluyentes, por lo que podemos unirlas en un solo código:

<style>
.estilo{
   background:  url(imagen/fondo.jpg) #CCC;
}
</style>

Hemos añadido el color gris de fondo, junto con la imagen fondo.jpg. Veamos ahora, las diferentes opciones de configuración de las imágenes:

background: url(imagen.jpg) tipo_repeticion alineacion_horizontal alineacion_vertical color;

Expliquemos esto con un ejemplo:

<style>
.estilo{
   background:  url(imagen/fondo.jpg) no-repeat top center #CCC;
}
</style>

El parámetro tipo_repetición, puede ser:

• no-repeat: la imagen solo se imprime una vez.


• repeat-x: la imagen se repite en bucle a lo largo del eje X, es decir, en horizontal.


• repeat-y: la imagen se repite en bucle a lo largo del eje Y, es decir, en vertical.

Los parámetros alineacion_horizontal y alineacion_vertical, pueden ser:

• Una instrucción: top, bottom, center,...


• Un porcentaje: 100%, 20%,...


• Una coordenada: 10px 20px,...

Antes de ver esto último con más detenimiento, vamos a ver las mejoras que ha incorporado CSS3 para esta propiedad, destacando, la posibilidad de añadir multiples capas de imágenes en un solo background:

<style>
.estilo{
   background:  url(imagen/fondo.jpg) no-repeat top center, url(imagen/fondo1.jpg) no-repeat top left, url(imagen/fondo2.jpg) no-repeat top right;
}
</style>

Esta es sin lugar a dudas la opción más potente, ya que nos permitirá subreponer varias capas de imagenes, consiguiendo diseños complejos, con muy poco código, lo cual es siempre una ventaja, como ejemplo, os pongo parte del código de este web:

html{
    background: url(imagenes/background/background-alternate.png) repeat, 
    url(imagenes/background/background-wave.png) repeat-x 0 400px, 
    url(imagenes/pack-gradient.png) repeat-x 0 -374px #FFF;    
}

En este caso, utilizo una técnica, denominada sprites, que permite utilizar partes de imagenes, por eso las coordenadas que podeis ver en el código, para saber más sobre el tema, os recomiendo que mireis este artículo, donde se explica como utilizar esta técnica:

• http://www.damianaguilar.com/articulos/css/CSS_sprites_-_Principios_b%C3%A1sicos/12/ 

Veamos ahora, como utilizar las diferentes propiedades por separado, es decir, imaginemos que tenemos varios background:

<style>
.estilo{
   background:  #CCC;
}

.estilo2{
   background: url(fondo.jpg) no-repeat #CCC;
}
</style>

Podemos unificar código así:

<style>
.estilo, .estilo2{
   background: #CCC;
}

.estilo2{
   background-image: url(fondo.jpg) no-repeat;
}
</style>

Es decir, aportando por separado las propiedades de background, las cuales pueden ser:

• background-color: nos permite asignar el color de fondo. Ej: background-color: #CCC;


• background-position: establece la posición del fondo. Ej: background-position: top;


• background-size: nos permite determinar el tamaño del fondo, ya sea en pixels, porcentaje, y los valores cover y contain. Ej: background-size: 100% 100%;, nos daría un fondo al 100% tanto en horizontal como en vertical.


• background-repeat: nos permite determinar si se repite o no. Ej: background-repeat: repeat-y; Permite: no-repeat, repeat-x y repeat-y.


• background-origin: Admite los siguientes parámetros: padding-box, border-box, content-box. Lo que nos permite posicionar la imagen con relación al padding del contenedor, al borde del contenedor o al contenido del contenedor.


• background-clip: Admite los siguientes parámetros: padding-box, border-box, content-box. Lo que nos permite es posicionar el color interior (background-color) en el límite del padding, del borde o del contenido.


• background-attachment: permite fijar el fondo bajo las propiedades: scroll (por defecto), fixed o inherit. Ej: background-attachment: fixed;


• background-image: ya la hemos explicado antes. Ej: background-image: url(fondo.jpg);