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.
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!
Hola Kazuki!
Blogger tiene la opción de poner un header directamente, puedes verlo en el post de opciones de Blogger
Un saludo!
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…
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.
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!
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?
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 ..
olvidalo ya lo solucione muchas gracias
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
hola
soi maricon ii busco sexo oral
Cojonuda explicacion, muchas gracias.
PD: Por que en estos foros de blogs entra tanta xxxxxxx de gente a poner bobadas????
Muchas Gracias! estaba buscando esto!
PD: Muy bueno tu sitio.
Saludos
hola soy adrian y tengo muchas novias………………… joderrrrrrrrrr
He tratado por todos los medios de poner plantillas echas por mi, esa que tengo en el blog es una prueba, tiene las medidas que tienen otras plantillas y nada,no logro cubrir todo el fondo, si me pudieras ayudar te lo agradeceria
muchas gracias por tu blog que nos ayuda mucho
ola
ps
Hola!
He probado ha poner la imagen y me ha salido (queda muy bien),
pero tengo un pequeño problema, y es que me sale el titulo del blog encima de la imagen y no se como hacer para que no se vea (porque no me deja).
Gracias por la ayuda, me ha sevido de mucho (soy muy mala para estas cosas XD)
Muchas gracias, me has ayudado mucho!!
Saludos.
Hola, estoy utilizando la plantilla Zinmag Remedy en mi blog, al querer colocar una imagen de cabezera, subo la imagen y supuestamente lo estoy haciendo bien, pero no aparece la imagen que estoy ulitizando de cabezera y no se como hacerlo por html.
yo tengo esto y quisiera cambiar el color por una imagen jpg que tengo en mi pc como hago?
body {
margin:0px;
padding:0px;
background:$bgcolor;
color:$textcolor;
font-size: small;
}
hola,
muchas gracias por tu post. he probado de poner un fondo, pero me lo aplica a todo el blog y entonces no se lee nada. tengo la minima en blanco, y no sé como hacer para que los posts y la sidebar queden en blanco, mientras que en el resto se vea la imagen de fondo.
alguna ayuda? gracias
hola tengo una duda de donde saaco el link de la imagen? es que soy nuevo en blogger
@lou subiendo la imagen a algún servicio gratuito o en el mismo blogger.
porque al querer cambiar mi plantilla, no me da la opcion de donde kiero cargar?? solo me da lo q es el codigo en html y esto: Cambiar Blogger NavBar
Blogger NavBar es una barra de navegación y de herramientas con un formulario que permite realizar búsquedas en sólo su blog mediante la función SiteSearch de Google y además saber con un solo clic qué ocurre en otros blogs recientemente publicados. Esta barra sustituye los anuncios que solían aparecer en la parte superior de algunos blogs.
No entiendo por q no m da la otra opcion, espero y me puedan ayudar, xq kiero cambiar mi plantilla.
como sería el código para poner un fondo negro que sea compatible para firefox xq el que tengo solo funciona en ie, muchas gracias.
Hola, hace dias abri un blog y necesito modificar la plantilla, he seguido los pasos y la imagen esta en un servidor propio, solamente sustituyo el codigo de la imagen y me aparece el siguiente error:
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The element type “HEAD” must be terminated by the matching end-tag “”.
Podrias ayudarme a descubiri a que se debe y como solucionarlo.
Gracias, espero puedas ayudarme
@Marisol en http://btemplates.com/faq-es/ puedes encontrar algunas posibles soluciones a ese error.
COMO PONGO UNA IMAGEN MÍA DE FONDO EN MI BLOG???
Que buena información, muy completa. Gracias!!!
hola, mucho de programacion no comprendo, resulta que quiero poner bajo la plantilla que he seleccionado un fondo hecho en photoshop, al querer editar la plantilla de default (minima lefty) abro su programacion HTML y estipula las variables, como puedo incorporar el fondo (imagen) sin q me marque error y que tome esa imagen?
Por favor necesito ayuda, quiero colocar una imagen como fondo del blog he hecho creo bien y no logro colocarla
por favor ayudenme
como veran en robertohernan.blogspot.com/ la imagen de cabezera me sale muy pequeña, trate muchismas cosas para poderla cambiar, bueno es la misma lo le puse mi nombre y cambie la imagen, ahora el problema es el tamaño, la original sale hasta la mitad de la primer fotoo mas o menos, como le doi tamaño a laimgen para q rellene????? ayuda!!!!
¡Muchas gracias por el tutorial! En verdad que no sabía como hacer que el fondo de mi blog no se repitiera sin que se quedara del tamaño que era, ahora pude arreglarlo ;D
¡Sigue asi con esta genial pagina!
yo quiero poner una imagen de fondo pero para mi blog es wordpress.
porfabor que alguien me responda.
hola!
me urge tu ayuda, ya pude poner la direccion de donde esta mi fondo, cuando le pongo preview sale con la imagen y todo bien padre, pero cuando termina de cargarse la pagina se ve todo blanco
urgeme tu ayuda
mil gracias!
@Cristian: El proceso es el mismo: Usar CSS.
@Lisette: Prueba alojando tu imagen en otro lado, o cerciórate de que en otra parte de tu blog haya un fondo blanco que se encime. Los diseños funcionan como capas.