Hacktime

Que seria de la web sin este blog

Imagen de fondo en tu blog

Posted by yaju en mayo 19, 2007

Es interesante saber que podemos colocar una imagen de fondo para nuestro blog, pero aun mas interesante saber como hacerlo… Veamos

Para colocar una imagen de fondo en tu blog debemos editar la etiqueta “body”

body {
background:#ffffff url(http://www.tu-sitio.com/fondo-web.jpg) top left no-repeat fixed;
}

Color
Lo primero que tenemos en background es el color de fondo, en este caso #ffffff, que es el código de color, puedes modificarlo con el que mejor valla con tu web pero
¿porqué se pone color al fondo si ya he colocado la imagen?
Hay veces que no se carga bien la imagen, conviene definir un color de fondo por si esto fallase. También nos sirve para tener un color de fondo en el caso de que la imagen no ocupe todo el documento.

Ruta
“url()” es la ubicación de la imagen que deseamos tener como fondo entre los paréntesis.


Ubicación
“top” y “left” dan la ubicación a la imagen de fondo y puede tomar los valores: top, right, bottom, left y center (superior, derecha, fondo, izquierda, centro).

Frecuencia
“no-repeat” nos indica que no se repetirá la imagen, esta propiedad también puede tener los valores:
repeat – Este es el valor por default, sino especificas nada, tu imagen de fondo siempre se repetirá.
repeat-x – repite el fondo sólo de forma horizontal.
repeat-y – repite el fondo sólo de forma vertical.
no-repeat – no repite el fondo, este solo tendrá el tamaño que la imagen tenga.

Poner como valor Y el porcentaje seria en vertical, pero hay que tener en cuenta que si colocamos la Y hay que cambiar la palabra “bottom” por izquierda o derecha.

Visualización
“fixed” nos indica que tendremos el fondo fijo y esta propiedad también puede tener los valores:
scroll – Este es el valor por default, sino especificas nada, tu imagen de fondo siempre se moverá junto con el texto.
fixed – Fija el fondo, al moverse el contenido, no se mueve la imagen de fondo.

Este truco esta realizado gracias a la ayuda de Recursos Blogs & Web

Otros trucos: Imagen de Fondo estático (Gem@)

3 comentarios to “Imagen de fondo en tu blog”

  1. Wra5 said

    yo todavia tengo el viejo blogger esto sirve para mi caso , y aparte la imagen tiene que estar en alguna pagina en especial alojada, desde ya gracias

  2. Leonel said

    Pues si puede servir para el viejo blogger, y si la imagen debe de estar alojada en algun servidor, puede ser que la subas a tu blog y copies la url, espero haber ayudado.

  3. saul said

    gracias funciono en mi blog lo que eh estado cambiando solo es el diseño de la imagen para que se vea bien con el efecto de fondo de pantalla

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: