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 de Blogger, estas propiedades siempre van antes de:
</b:skin>
de tu plantilla.
Imagen de portada: Anna Danilec.
Kazuki septiembre 29, 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!
ResponderFrancisco octubre 1, 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!
ResponderNahuelsss noviembre 8, 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…
ResponderMike Lee febrero 13, 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.
Responder¿Alguna sugerencia?
micromiguel julio 3, 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 ..
Respondermicromiguel julio 3, 2008 a las 6:22 am
olvidalo ya lo solucione muchas gracias
Responderrosa enero 27, 2009 a las 1:11 am
hola
Respondermaricon busca sexo abril 17, 2009 a las 7:16 am
soi maricon ii busco sexo oral
ResponderJuanma abril 28, 2009 a las 4:09 pm
Cojonuda explicacion, muchas gracias.
PD: Por que en estos foros de blogs entra tanta xxxxxxx de gente a poner bobadas????
ResponderLuzbel junio 3, 2009 a las 10:26 am
Muchas Gracias! estaba buscando esto!
ResponderPD: Muy bueno tu sitio.
Saludos
samec junio 14, 2009 a las 2:11 pm
hola soy adrian y tengo muchas novias………………… joderrrrrrrrrr
ResponderSholy julio 3, 2009 a las 9:46 pm
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
Respondermuchas gracias por tu blog que nos ayuda mucho
ANGELA julio 25, 2009 a las 8:01 pm
ola
Responderps
umi julio 30, 2009 a las 8:04 am
Hola!
ResponderHe 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)
Amanda agosto 1, 2009 a las 3:53 pm
Muchas gracias, me has ayudado mucho!!
ResponderSaludos.
Alonso agosto 12, 2009 a las 1:10 pm
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.
ResponderHumberto octubre 13, 2009 a las 12:52 pm
yo tengo esto y quisiera cambiar el color por una imagen jpg que tengo en mi pc como hago?
body {
Respondermargin:0px;
padding:0px;
background:$bgcolor;
color:$textcolor;
font-size: small;
}
leticia nuro noviembre 12, 2009 a las 11:38 am
hola,
Respondermuchas 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
lou enero 1, 2010 a las 10:29 pm
hola tengo una duda de donde saaco el link de la imagen? es que soy nuevo en blogger
ResponderFrancisco enero 5, 2010 a las 8:30 am
@lou subiendo la imagen a algún servicio gratuito o en el mismo blogger.
Responderlilis enero 24, 2010 a las 4:19 pm
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.
ResponderNicolas febrero 5, 2010 a las 1:13 pm
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.
ResponderMarisol marzo 3, 2010 a las 4:01 pm
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
ResponderFrancisco marzo 3, 2010 a las 4:35 pm
@Marisol en https://btemplates.com/faq-es/ puedes encontrar algunas posibles soluciones a ese error.
ResponderMaría marzo 8, 2010 a las 10:40 pm
COMO PONGO UNA IMAGEN MÍA DE FONDO EN MI BLOG???
ResponderMargarita marzo 12, 2010 a las 10:53 am
Que buena información, muy completa. Gracias!!!
Responderluciano abril 29, 2010 a las 11:16 am
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?
ResponderLorena abril 30, 2010 a las 5:06 pm
Por favor necesito ayuda, quiero colocar una imagen como fondo del blog he hecho creo bien y no logro colocarla
Responderpor favor ayudenme
robertfotos junio 1, 2010 a las 4:51 am
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!!!!
Responderxilema95 junio 17, 2010 a las 11:03 am
¡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
Responder¡Sigue asi con esta genial pagina!
Cristian julio 11, 2010 a las 7:48 pm
yo quiero poner una imagen de fondo pero para mi blog es wordpress.
porfabor que alguien me responda.
ResponderLisette julio 14, 2010 a las 7:35 pm
hola!
Responderme 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!
Francisco julio 14, 2010 a las 11:49 pm
@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.
Respondermila septiembre 17, 2010 a las 11:00 am
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
ResponderVioleta septiembre 18, 2010 a las 7:40 am
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.!!!
Respondervisita nuestra página y ojalá encunetres alguna peli o Cd que te agrade y puedas bajar…
Abracitos y muy agradecida.
Violeta
Cesar Castro octubre 7, 2010 a las 4:45 pm
Muchas gracias!!!
Una pregunta: ¿tu sabes como hacen para que los usuarios puedan cambiar el fondo de la página?
ResponderCarla noviembre 14, 2010 a las 9:42 pm
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.-
ResponderSalu2 y espero q alguien me ayude 😉
Marisol diciembre 25, 2010 a las 9:08 pm
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
ResponderMarisol diciembre 25, 2010 a las 9:09 pm
escribi mal mi mail, por favor ayudenme no se que hacer, no entiendo por que la plantilla no cambia
ResponderMarisol diciembre 26, 2010 a las 12:14 pm
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
ResponderElle enero 6, 2011 a las 12:35 pm
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
Responderadinath febrero 21, 2011 a las 2:00 pm
excelente,muchas gracias por la aportacion,muy profesional,pude solucionar muy rapido el cambio de fondo
ResponderMaria febrero 24, 2011 a las 11:04 am
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
Responderdaniel felipe febrero 26, 2011 a las 9:22 pm
estos ijueputas nomean puesto mi imagen
ResponderLuis abril 10, 2011 a las 8:37 am
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!!!!!!!!!
Responderbyron abril 14, 2011 a las 8:49 pm
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
ResponderFary77 abril 24, 2011 a las 8:37 am
Muy bueno el articulo.
ResponderDespues de leer 6 paginas ninguna me sirvio y esta lo solucione.
Un saludo.
jordan mayo 11, 2011 a las 7:56 pm
hola soi bueno era de la escuela ogar solo estoi buscando un amigo de alla aora estoi en la escuela del trapiche
Responderjuan cruz julio 7, 2011 a las 12:05 pm
muchas gracias estaba buscando como hacer para que quede el fondo fijo! con fixed lo solucione 😀
Responderselene julio 18, 2011 a las 1:13 pm
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
ResponderEsteban Jobs julio 25, 2011 a las 9:24 pm
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
Responderriggs agosto 8, 2011 a las 11:15 am
Cada vez que entro a este blog, resuelvo un problema mas….exelente!
Respondergus138 agosto 15, 2011 a las 2:15 pm
hey y por que no pones tamaño eso es lo que eh estado buscando 🙁
Respondersergio agosto 16, 2011 a las 3:14 am
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..
Responderayelen fernandez agosto 19, 2011 a las 1:22 pm
la pagina del buscador de gogle se ve por la mitad al igual que facebookcomo puedo solucionarlo??????’
Respondercristy septiembre 30, 2011 a las 9:01 pm
HOLA SOY UNA ESTUDIANTE NOVATA EN CREACION DE PAGINA WEB QUISIERA QUE ENVIARA UN EJEMPLO COMPLETO PAA CEAR MI PAGINA WEB
ResponderCHAO ……… GRACIAS
cristy septiembre 30, 2011 a las 9:05 pm
Necesito que me ayudes en verdad no como empesar , espero que me ayude a crear mi pagin web .muchas gracias…………
Responderdavid octubre 25, 2011 a las 3:21 pm
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.
ResponderNoemí Minguela noviembre 7, 2011 a las 8:10 pm
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.
Respondernaiara noviembre 21, 2011 a las 1:22 pm
hola me llamo naiara y soy tan linda que todos gustan de mi y se quieren casar con migo me voy chauuu 🙂
Respondermaga noviembre 21, 2011 a las 1:25 pm
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
Respondermaga noviembre 21, 2011 a las 1:28 pm
hola soy naiara te digo como hacer para que pongas la foto tenes que ser torpe 😀 buajajaaaaaaaaaaaa sos torpeeeee
Responderjhony diciembre 20, 2011 a las 12:30 pm
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
Responderadnanref zap febrero 24, 2012 a las 11:23 pm
no entendi como poner una imagen o cambiarla se me olbido
ResponderEsther abril 27, 2012 a las 2:20 am
Gracias!
Responderveronica huamani diaz junio 11, 2012 a las 9:41 am
en mi pagina web canbie el color de fondo de una foto y ahora esta foto al agranbdarle se ve muy oscura como puedo solucionarlo
ResponderAna Arana septiembre 21, 2012 a las 5:56 am
Francisco, me ayudarias un montón si me dijeras el error que he cometido en mi blog, pués no me deja el fondo fijo. He probado todo lo que he leido por ahí,siempre de confianza y no lo consigo.
Te pongo la dirección de mi nuevo blog de clase y lo que quiero conseguir es dejar el FONDO FIJO
Muchas gracias
ResponderDavid marzo 12, 2013 a las 1:48 pm
Gracias por tus explicaciones.
Yo tengo un problema en relación a la imagen de fondo de una web, a la que me gustaría añadir un enlace; bien desde la misma imagen, bien desde un texto añadido.
El style.css recoge esto:
#cuerpo {
position:absolute;
left:50%;
width:1100px;
height:900px;
z-index:1;
margin-left: -550px;
background-image: url(../img/fondo.png);
background-repeat: no-repeat;
}
body {
background-color: #F3F3F3;
}
¿Como puedo añadir un vínculo a dicho fondo?
Me gustaría más con un texto, pero si debe hacerse pinchando en cualquier lugar de la imagen, también me sirve.
Espero y confío en tu ayuda.
Muchas gracias,
ResponderDavid.
Javier agosto 10, 2013 a las 3:18 am
Muchas Gracias me sirvio de mucho (Y)
ResponderMariantogf noviembre 8, 2013 a las 10:22 am
Hola, yo hago todo eso y no puedo ver el fondo, al abrirlo en el navegador me sale un fondo gris que yo no tengo dado de alta, me podrian ayudar?
ResponderGracias
david mayo 2, 2014 a las 10:26 pm
Amigo como vera en la pagina no logro que la imagen me ocupe toda la, he intentado de diferentes maneras y nada.
Responderjuegagratis agosto 28, 2020 a las 6:06 pm
HOla , No se si seguira vivo este articulo pero me gustaria preguntar. ¿Como le puedo añadir un enlace a la imagen de fondo?
ResponderFrancisco Oliveros agosto 30, 2020 a las 10:19 am
Qué tal, no es posible agregar un enlace directamente a un fondo pero es posible hacerlo con Javascript.
Responder