Imagen de fondo en tu web o blog
Mayo 2nd, 2007 | Publicado por Francisco en Blogger, CSS | 9 Comentarios
El fondo de una web 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 manejar el fondo de tu web o blog con una imagen.
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 <body> con la propiedad “background” (fondo).
Sabiendo esto, la modificación de etiqueta “body” se hace en tu archivo .css o del espacio de tu web destinado a la hoja de estilos, por ejemplo:
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, aqui puedes modificarlo con el que mejor valla con tu web y cuando pones una imagen de fondo no fija, será el color que se muestre fuera del espacio de la imagen y mientras carga.
Ruta
“url()” es la ubicación de la imagen que deseamos tener como fondo entre los parentesis.
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.
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 tendra el tamaño que la imagen tenga.
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 movera junto con el texto.
fixed - Fija el fondo, al moverse el contenido, no se mueve la imagen de fondo.
En el caso del nuevo blogger, estas propiedades siempre van antes de:
></b:skin>de tu plantilla.
Septiembre 29th, 2007 a las 11:39 am (#)
Hola, sabes tengo una duda con el articulo..
SI yo quiero poner una imagen como cabecera de mi blog, sin necesidad de reemplazar todo el fondo, solo tengo que cambiar la ubicacion de donbe quiero que vaya la imagen??.
Ojala me puedas responder.
De antemano gracias!
Octubre 1st, 2007 a las 12:46 pm (#)
Hola Kazuki!
Blogger tiene la opción de poner un header directamente, puedes verlo en el post de opciones de Blogger
Un saludo!
Noviembre 8th, 2007 a las 8:57 pm (#)
Mira,no puedo poner el “scroll” en mi blog…y la verdad es q no entiendo en que posicion debo poner antes del >,xq kuando lo pongo antes de este justamente,se me pone todo un fondo blanco…
Desde ya si tienen una solucion,muchas gracias!!!Muy buena pagina,me ha ayudado mucho,pero ahora me surgio este problemilla…
Noviembre 9th, 2007 a las 8:40 am (#)
Hola amigos:
HE adoptado para mi blog la plantilla blogy-curved utilizando un color de fondo negro como podran ver en http://mondoalterno.blogspot.com/ pero como podrán apeciar no pude ponerle el mismo color al cuadro en donde aparece el titulo de los post.
¿alguien podría decirme como puedo solucionarlo?
Muchisimas gracias, y saludos cordiales.
Bepo.
Noviembre 12th, 2007 a las 10:28 pm (#)
Nahuelsss, puedes encontrar más a fondo en infected fx.
Bepo, te agradecería pongas tu pregunta en el post de esa plantilla y no en varios post.
Saludos!
Febrero 13th, 2008 a las 3:01 pm (#)
Hola, mi blog es nuevo, de creación reciente, y he probadao todos los códigos para cambiar el fondo por una imagen pero con cualquiera apparece en blanco.
¿Alguna sugerencia?
Julio 3rd, 2008 a las 5:55 am (#)
hola disculpa la molestia lo que pasa es que ya tengo asi bien el codigo y todo de hecho yo uso plantilla pero . aparece todo en blanco encima de mi imagen y de hecho mi fondo es negro (estos dos ultimos si aparecen ) pero como digo todo encima de estos es blanco .. ¿por que ? .. no sabes como puedo solucionarlo?? por la atencion gracias . y espero . puedas responder =) . gracias ..
Julio 3rd, 2008 a las 6:22 am (#)
olvidalo ya lo solucione muchas gracias
Agosto 7th, 2008 a las 1:45 pm (#)
Gracias, muchisimas gracias.
He buscado por muchisimas partes algun codigo para dejar una imagen de fondo estatica y ninuno servia.
Además creo que la plantilla de mi blog era de esta página.
Así que, muy agradecido.
http://7samfc.blogspot.com