domingo, 22 de mayo de 2011

Añadiendo una segunda imagen de fondo

Si tenemos una imagen de fondo en el blog podemos añadirle un efecto que le aporte calidez con una segunda imagen de fondo.

Imagen única en body


Resultado con pattern


La segunda imagen que añadiremos será de tipo pattern este tipo de imágenes se usan en la repetición de elementos gráficos. El formato aconsejado es png (fondo transparente) porque esa transparencia será la que permitirá visualizar la imagen de body.
Para el tamaño escogeremos 2x2. El resultado sería algo así.



Si visualizamos el blog a gran tamaño será más perceptible la imagen que añadimos de fondo transparente.


Los estilos de body los dejaremos como están con la imagen de fondo que ya teníamos añadida, si no la tenemos podemos ver la forma de añadirla en las siguientes entradas. 1 - 2

Justo antes de ]]></b:skin> añadiremos los estilos para la imagen que hemos creado.

.background2 {
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
background:transparent url(Url-pattern-png) repeat top left;
}

Luego buscamos <div id='content-wrapper'> y justo después añadimos:

<div class="background2"></div>

No hay comentarios:

Publicar un comentario