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.
hola necesito ayuda urgente soy nueva en el blogger y quiero poner una imagen de Background fija y he puesto el url de la imagen y no me hace el cambio no creo que le estoy haciendo bien porque lo pongo en este de esta manera:
body {
background:$bgcolor;
url(http://subefotos.com/ver/?ea2606540a45ce0240c14400a8b6dcc5o.jpg)
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
y no me hace el cambio por favor ayudame o explicame de que manera lo puedo hacer bien…
mil gracias
Graciassssssssssssssssssssssssssssss………..no sabes lo feliz que me siento…ando desde hace meses buscando como poner el fondo fijo en la página…he visto y probado miles de formas y nunca pude hacerlo…..y la explicación que das…sencilla…concreta y precisa fue maravillosa…en un solo cambio LO LOGRÉ…!!!!!!! Tu explicación es PERFECTA….miles de millones de GRACIAS.!!!
visita nuestra página y ojalá encunetres alguna peli o Cd que te agrade y puedas bajar…
Abracitos y muy agradecida.
Violeta
Muchas gracias!!!
Una pregunta: ¿tu sabes como hacen para que los usuarios puedan cambiar el fondo de la página?
Chicos necesito ayuda, lo q pasa q vi un twitter en q la imagen de fondo se movia, queria saber si alguno sabe como hacerlo porq busco y no sale ninguna info solo para la foto de perfil, pero yo quiero para la imagen de fondo de mi twitter.-
Salu2 y espero q alguien me ayude
Hola, necesito ayuda urgente, he abierto mi blog, le puse varias cosas, pero cuando intento cambiar el fondo, no me los agarra haga lo que haga el fondo sigue igual.
este es mi código
body {
background:#67727B;
color:#333333;
font-family:”Helvetica Neue”,Arial,Helvetica,sans-serif;
font-size:13px;
margin:0;
text-align:center;
}
a:link {
color:#D13350;
text-decoration:none;
}
a:visited {
color:#D13350;
text-decoration:none;
}
a:hover {
color:#CC6600;
text-decoration:underline;
}
a img {
border-width:0;
}
Entonces cambio este background:#67727B;
por background:#000000; por que quiero un fondo negro y nada de nada el fondo no cambia.
entoces agi esto
body {
background:url(‘http://i766.photobucket.com/albums/xx307/Jenn-Sweet/neg24.jpg’);
background-attachment: fixed;
background-repeat: no repeat;
pero el cochino fondo sigue igual no cambia. que puedo hacer ayuda por favor
escribi mal mi mail, por favor ayudenme no se que hacer, no entiendo por que la plantilla no cambia
Hola de nuevo.
ya probando a lo ignorancia y prueba de suerte lo solucione. en la etiqueta
#wrapper
abajo le agrego
background:#000000
o
background:url(‘http://i766.photobucket.com/albums/xx307/Jenn-Sweet/neg24.jpg’);
background-attachment: fixed;
background-repeat: no repeat;
y de ahí si cambio urrraaaa
chauu
No lo entiendo, no se me cambia nada. Tampoco se si tengo el nuevo blogger o el antiguo. Hice lo que ponias y se queda en blanco :S y por mas que leo no entiendo nada de nada
excelente,muchas gracias por la aportacion,muy profesional,pude solucionar muy rapido el cambio de fondo
Hola… yo queria poner una imagen de fondo arriba del blog fija, y luego otra imagen de fondo abajo del blog tambien fija, pero solo puedo poner 1… sabrias como puedo hacer para tener las 2 imagenes… gracias
estos ijueputas nomean puesto mi imagen
Saludos comunidad!! necesito poner como imagen de fondo de mi web una foto que tengo en mi PC, la pagina esta hecha en una plantilla de wordpress……..
AYUDA POR FAVOR!!!!!!!!!
hola amigos me pueden ayudar a algun visitante que me ayude a colocar color o imagen a mi web lo que pasa que la web me la diero diseñada solo para colocar link y nombre de los botones pero la parte superior de la web no mucho me gusta y quiero quitarla pues uso el codigo que esta en la parte de arriba pero solo oculta el color quiero quitar el escrip de esos colores y que la imagen que coloque de fondo se repita pues le coloco repeat y no funciona mi web es webyronmarroquin.es.tl para que tenga una ide de que les digo porfa gracias
Muy bueno el articulo.
Despues de leer 6 paginas ninguna me sirvio y esta lo solucione.
Un saludo.
hola soi bueno era de la escuela ogar solo estoi buscando un amigo de alla aora estoi en la escuela del trapiche
muchas gracias estaba buscando como hacer para que quede el fondo fijo! con fixed lo solucione
hola francisco he intentado cambiar el fondo del bloger por uno echo por mi,he seguido tus indicaciones pero aunque me sale centrado no consigo k ocupe todo el fondo,que puedo hacer para solucionarlo? puedes pasar por mi blogg y echarle una miradita? gracias
Que tal Francisco:
Excelente el post, más bien una consulta, en una de mis visitas llegue a un blog con una imagen de fondo, también, pero lo que me llamo la atención es que podía hacer click en el fondo y éste me dirigía a una página. Te agradecería bastante si me comentarás algún codigo para hacer que fondo actué como un imágen para hacer click y me redireccione a una página.
Gracias
Cada vez que entro a este blog, resuelvo un problema mas….exelente!
hey y por que no pones tamaño eso es lo que eh estado buscando
Buenos días. De verdad decirte que este blog lo he visitado varias veces y he podido solucionar algunos problemas lo cual estoy contento con lo que haces………
Te cuento que estoy aprendiendo inglés y que mejor idea que crear un blog para hacer entretenido el aprendizaje… Ahora se me presenta una duda que no se como solucionar….
Mi plantilla es a modo revista y quisiera insertar una imagen de fondo exclusivamente en la zona negra que está detrás de los menus… Pero no se como tratar el codigo…
Te dejo la direc. Para q veas donde espero que me puedas ayudar…
Xochipillienglish.blogspot.com
te deseo lo mejor xa este blog… Espero respuesta..
la pagina del buscador de gogle se ve por la mitad al igual que facebookcomo puedo solucionarlo??????’
HOLA SOY UNA ESTUDIANTE NOVATA EN CREACION DE PAGINA WEB QUISIERA QUE ENVIARA UN EJEMPLO COMPLETO PAA CEAR MI PAGINA WEB
CHAO ……… GRACIAS
Necesito que me ayudes en verdad no como empesar , espero que me ayude a crear mi pagin web .muchas gracias…………
tengo un problema puse una plantilla y aparece hasta la mitad y lo demas en blanco y no puedo iniciar seccion y ni quitar la plantilla si puedes echarme una mano t agradeceria por fa.
Estoy haciendo una presentación en power point. Algunas secciones de plantillas dobles quisiera poner una foto como backgroun. ¿cómo se hace? Gracias por contestar.
hola me llamo naiara y soy tan linda que todos gustan de mi y se quieren casar con migo me voy chauuu
hola perdon por lo que dijo mi hermana es tan torpe que un balcon y diganme quien quiere ser mi novio chauuuuuuuuu
♥ me voy a escuchar musica ♫♫♫♫♫ chauuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
hola soy naiara te digo como hacer para que pongas la foto tenes que ser torpe
buajajaaaaaaaaaaaa sos torpeeeee
hola tengo un blog de peliculas que recien estoy empezando a postear , la verdad que he tenido problemas con el banner de arriba , no logro que el titulo y la descripcion vayan detras de la imagen , como lo haria en css
no entendi como poner una imagen o cambiarla se me olbido
Gracias!