English Português

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.

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

Comentarios

  1. Kazuki / Hace 7 años /

    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!

    Responder a Kazuki →
  2. Francisco / Hace 7 años /

    Hola Kazuki!

    Blogger tiene la opción de poner un header directamente, puedes verlo en el post de opciones de Blogger

    Un saludo!

    Responder a Francisco →
  3. Nahuelsss / Hace 7 años /

    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…

    Responder a Nahuelsss →
  4. Bepo / Hace 7 años /

    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.

    Responder a Bepo →
  5. Francisco / Hace 7 años /

    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!

    Responder a Francisco →
  6. Mike Lee / Hace 7 años /

    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?

    Responder a Mike Lee →
  7. micromiguel / Hace 6 años /

    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 ..

    Responder a micromiguel →
  8. micromiguel / Hace 6 años /

    olvidalo ya lo solucione muchas gracias

    Responder a micromiguel →
  9. 7samfc / Hace 6 años /

    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

    Responder a 7samfc →
  10. rosa / Hace 6 años /

    hola

    Responder a rosa →
  11. maricon busca sexo / Hace 6 años /

    soi maricon ii busco sexo oral

    Responder a maricon busca sexo →
  12. Juanma / Hace 5 años /

    Cojonuda explicacion, muchas gracias.

    PD: Por que en estos foros de blogs entra tanta xxxxxxx de gente a poner bobadas????

    Responder a Juanma →
  13. Luzbel / Hace 5 años /

    Muchas Gracias! estaba buscando esto!
    PD: Muy bueno tu sitio.
    Saludos

    Responder a Luzbel →
  14. samec / Hace 5 años /

    hola soy adrian y tengo muchas novias………………… joderrrrrrrrrr

    Responder a samec →
  15. Sholy / Hace 5 años /

    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

    Responder a Sholy →
  16. ANGELA / Hace 5 años /

    ola
    ps

    Responder a ANGELA →
  17. umi / Hace 5 años /

    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)

    Responder a umi →
  18. Amanda / Hace 5 años /

    Muchas gracias, me has ayudado mucho!!
    Saludos.

    Responder a Amanda →
  19. Alonso / Hace 5 años /

    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.

    Responder a Alonso →
  20. Humberto / Hace 5 años /

    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;
    }

    Responder a Humberto →
  21. leticia nuro / Hace 5 años /

    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

    Responder a leticia nuro →
  22. lou / Hace 5 años /

    hola tengo una duda de donde saaco el link de la imagen? es que soy nuevo en blogger

    Responder a lou →
  23. Francisco / Hace 5 años /

    @lou subiendo la imagen a algún servicio gratuito o en el mismo blogger.

    Responder a Francisco →
  24. lilis / Hace 5 años /

    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.

    Responder a lilis →
  25. Nicolas / Hace 5 años /

    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.

    Responder a Nicolas →
  26. Marisol / Hace 5 años /

    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

    Responder a Marisol →
  27. Francisco / Hace 5 años /

    @Marisol en http://btemplates.com/faq-es/ puedes encontrar algunas posibles soluciones a ese error.

    Responder a Francisco →
  28. María / Hace 5 años /

    COMO PONGO UNA IMAGEN MÍA DE FONDO EN MI BLOG???

    Responder a María →
  29. Margarita / Hace 5 años /

    Que buena información, muy completa. Gracias!!!

    Responder a Margarita →
  30. luciano / Hace 4 años /

    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?

    Responder a luciano →
  31. Lorena / Hace 4 años /

    Por favor necesito ayuda, quiero colocar una imagen como fondo del blog he hecho creo bien y no logro colocarla
    por favor ayudenme

    Responder a Lorena →
  32. robertfotos / Hace 4 años /

    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!!!!

    Responder a robertfotos →
  33. xilema95 / Hace 4 años /

    ¡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!

    Responder a xilema95 →
  34. Cristian / Hace 4 años /

    yo quiero poner una imagen de fondo pero para mi blog es wordpress.

    porfabor que alguien me responda.

    Responder a Cristian →
  35. Lisette / Hace 4 años /

    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!

    Responder a Lisette →
  36. Francisco / Hace 4 años /

    @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.

    Responder a Francisco →
  37. mila / Hace 4 años /

    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

    Responder a mila →
  38. Violeta / Hace 4 años /

    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

    Responder a Violeta →
  39. Cesar Castro / Hace 4 años /

    Muchas gracias!!!

    Una pregunta: ¿tu sabes como hacen para que los usuarios puedan cambiar el fondo de la página?

    Responder a Cesar Castro →
  40. Carla / Hace 4 años /

    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 ;)

    Responder a Carla →
  41. Marisol / Hace 4 años /

    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

    Responder a Marisol →
  42. Marisol / Hace 4 años /

    escribi mal mi mail, por favor ayudenme no se que hacer, no entiendo por que la plantilla no cambia

    Responder a Marisol →
  43. Marisol / Hace 4 años /

    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

    Responder a Marisol →
  44. Elle / Hace 4 años /

    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

    Responder a Elle →
  45. adinath / Hace 4 años /

    excelente,muchas gracias por la aportacion,muy profesional,pude solucionar muy rapido el cambio de fondo

    Responder a adinath →
  46. Maria / Hace 4 años /

    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

    Responder a Maria →
  47. daniel felipe / Hace 4 años /

    estos ijueputas nomean puesto mi imagen

    Responder a daniel felipe →
  48. Luis / Hace 4 años /

    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!!!!!!!!!

    Responder a Luis →
  49. byron / Hace 4 años /

    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

    Responder a byron →
  50. Fary77 / Hace 3 años /

    Muy bueno el articulo.
    Despues de leer 6 paginas ninguna me sirvio y esta lo solucione.
    Un saludo.

    Responder a Fary77 →
  51. jordan / Hace 3 años /

    hola soi bueno era de la escuela ogar solo estoi buscando un amigo de alla aora estoi en la escuela del trapiche

    Responder a jordan →
  52. juan cruz / Hace 3 años /

    muchas gracias estaba buscando como hacer para que quede el fondo fijo! con fixed lo solucione :D

    Responder a juan cruz →
  53. selene / Hace 3 años /

    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

    Responder a selene →
  54. Esteban Jobs / Hace 3 años /

    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

    Responder a Esteban Jobs →
  55. riggs / Hace 3 años /

    Cada vez que entro a este blog, resuelvo un problema mas….exelente!

    Responder a riggs →
  56. gus138 / Hace 3 años /

    hey y por que no pones tamaño eso es lo que eh estado buscando :(

    Responder a gus138 →
  57. sergio / Hace 3 años /

    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..

    Responder a sergio →
  58. ayelen fernandez / Hace 3 años /

    la pagina del buscador de gogle se ve por la mitad al igual que facebookcomo puedo solucionarlo??????’

    Responder a ayelen fernandez →
  59. cristy / Hace 3 años /

    HOLA SOY UNA ESTUDIANTE NOVATA EN CREACION DE PAGINA WEB QUISIERA QUE ENVIARA UN EJEMPLO COMPLETO PAA CEAR MI PAGINA WEB
    CHAO ……… GRACIAS

    Responder a cristy →
  60. cristy / Hace 3 años /

    Necesito que me ayudes en verdad no como empesar , espero que me ayude a crear mi pagin web .muchas gracias…………

    Responder a cristy →
  61. david / Hace 3 años /

    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.

    Responder a david →
  62. Noemí Minguela / Hace 3 años /

    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.

    Responder a Noemí Minguela →
  63. naiara / Hace 3 años /

    hola me llamo naiara y soy tan linda que todos gustan de mi y se quieren casar con migo me voy chauuu :)

    Responder a naiara →
  64. maga / Hace 3 años /

    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

    Responder a maga →
  65. maga / Hace 3 años /

    hola soy naiara te digo como hacer para que pongas la foto tenes que ser torpe :D buajajaaaaaaaaaaaa sos torpeeeee

    Responder a maga →
  66. jhony / Hace 3 años /

    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

    Responder a jhony →
  67. adnanref zap / Hace 3 años /

    no entendi como poner una imagen o cambiarla se me olbido

    Responder a adnanref zap →
  68. Esther / Hace 2 años /

    Gracias!

    Responder a Esther →
  69. veronica huamani diaz / Hace 2 años /

    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

    Responder a veronica huamani diaz →
  70. Ana Arana / Hace 2 años /

    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

    Responder a Ana Arana →
  71. David / Hace 2 años /

    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,
    David.

    Responder a David →
  72. Javier / Hace 1 año /

    Muchas Gracias me sirvio de mucho (Y)

    Responder a Javier →
  73. Mariantogf / Hace 12 meses /

    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?
    Gracias

    Responder a Mariantogf →
  74. david / Hace 6 meses /

    Amigo como vera en la pagina no logro que la imagen me ocupe toda la, he intentado de diferentes maneras y nada.

    Responder a david →

Responder

¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

Términos de uso - Política de privacidad