jueves, 24 de noviembre de 2011

Imagen de Fondo (CSS) - Vistas Dinamicas en Blogger

El fondo de la plantilla Vistas dinámicas en Blogger  es uno de los elementos más importantes, siempre esta presente y casi siempre tiene mucho espacio destinado. En este artículo básico te mostraremos como poner una imagen de fondo  a la nueva plantilla vistas dinamicas de bloggers.

La imagen que usaremos para poner de fondo en la plantilla vistas dinamicas no debe ser mayor a 250k.


Lo primero es saber que la forma correcta de colocar una imagen de fondo es por medio de las hojas de estilo CSS, modificando la etiqueta con la propiedad “background” (fondo).



Sabiendo esto, la modificación la realizamos en la pestaña "Diseño" luego en "Avanzado" y en la ficha "Añadir CSS" Colocamos el  siguiente codigo:


 Para insertar una imagen y deseas que no se repita:

body {
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Y6SIN3nhI7TymMaxYOSBlmlbO9NwB0aBo7QOw2NWP5YuqZCs2ZF25kk71XSEYnfpFaC5gD9BcJms_FzoaKbj5S70YZyRTnsDVOWxfQqWhNLu3bycD-kDThwwwKO59AoRP33x2BUjccg/s262/logociudad-line.jpg) top left no-repeat fixed;
}


 Para insertar una imagen y deseas que se repita:


body {
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Y6SIN3nhI7TymMaxYOSBlmlbO9NwB0aBo7QOw2NWP5YuqZCs2ZF25kk71XSEYnfpFaC5gD9BcJms_FzoaKbj5S70YZyRTnsDVOWxfQqWhNLu3bycD-kDThwwwKO59AoRP33x2BUjccg/s262/logociudad-line.jpg) top left repeat fixed;
}




 Imagen de Fondo (CSS) al logo





#header .header-bar {
background: #EEE url(http://www.vectorizados.com/muestras/mini-fondo-web.jpg) repeat-x fixed top center;
background-position: left top;
background-repeat: no-repeat;
background: #EEE url(http://www.vectorizados.com/muestras/mini-fondo-web.jpg) repeat-x fixed top center;
background-attachment: scroll;
background-color: rgba(243, 243, 243, 1);
-moz-box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.3);
-ms-box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.3);
-o-box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.3);
height: 65px;
position: fixed;
width: 100%;
z-index: 1001;
}

1 comentario:

  1. Muchisisisisimas gracias, lo he estado buscándo por todos lados para ponerlo en mi blog :D

    ResponderEliminar