FOLLOW ME!

SOCIAL NETWORK

AFILIAME
Not A Single Song
Para más botones, haz clic aquí

Cómo poner 2 fondos diferentes

10 feb. 2013
Hola bellas! Me preguntaron por Ask si podía hacer un tutorial explicando como se pueden poner 2 fondos diferentes en el blog así como lo ven ahora en Not A Single Song. La verdad es muy sencillo así que aquí les explico como hacerlo.

NOTA: Siempre que hagan un tutorial en el que tienen que modifica el código, les recomiendo hacer una copia de seguridad yendo a Plantilla - Crear/Restablecer copia de seguridad - Descargar plantilla completa



1. Van a Plantilla - Editar HTML
2. Abren el buscador (CTRL+F) y ponen body {. Les saldra eso y un poco más abajo html body $(page.width.selector) { o parecido, algo como esto:

3. Ahora vamos a borrar todo esto y lo vamos a reemplazar por lo siguiente:
body, html {
 font: $(body.font);
 color: $(body.text.color);
 height: 500px; /*Altura del fondo del header*/
 padding: 0; 
 margin: 0;
}
body {
background: url("URL del fondo del header");
background-repeat: repeat;
}
html {
background: #eedfb4; /*Color del fondo del blog*/
}
Es importante que presten atención a esto:
- en body { va el fondo superior pero arriba en body, html{ deben poner la altura del mismo y;
- en html { va el fondo inferior

Guardan los cambios y ya está!

Recuerden que los fondos pueden ser o un color o una imagen. 
Si desean que sea simplemente un color deben poner background: #eedfb4; y reemplazar el código.
Pero si les gustaría poner una imagen, tienen que poner: background: url("URL de la imagen");

Eso es todo. Cualquier duda que les haya quedado, me dejan un comentario. Un besito!

21 comentarios :

  1. Me sirvio mucho grax cataa!
    Eres la mejor OMG

    ResponderEliminar
  2. porque ami nunca me aparecen esos codigos T.T

    ResponderEliminar
    Respuestas
    1. NUNCA?
      No se por qué no te aparecen la verdad, estan en todas las plantillas de Blogger...

      Eliminar
  3. A mi me pasa muy parecito a Moustachito, hasta que puse la misma plantilla que la tuya... Si pongo una es como que desaparecieran todos los codigos que muestras en los tutos :/

    ResponderEliminar
    Respuestas
    1. No se chicas, yo no estoy loca... la verdad no se que hacen, que plantilla usan o que buscan que no les sale porque yo lo hago perfectamente :/

      Eliminar
    2. Hola! Podría ser porque se necesita "Expandir Plantillas de Artilugios" (situado arriba a la izquierda) para que te salgan los códigos que tu dices cataa. ;)

      Eliminar
  4. Bueno, por ejemplo, ahora mismo, no me aparece ese codigo :// Salen 3 body { y ninguno es. Incluso, traté, y nop xD no se que estoy haciendo mal, pero una imagen aparece en todo el blog y la otra aparece debajo de los créditos de "Con la tecnologia de Blogger" O.O

    ResponderEliminar
    Respuestas
    1. Como que te salen 3 body{ ha de ser el primero no siempre aparece el html body $(page.width.selector) { puede que solo salga el body.. y lo otro que me has dicho no te he entendido ni medio

      Eliminar
    2. Si quieres pasame la captura del primer body{ que te sale y ya te digo si es.. porque es que me resulta RARISIMO que no te salga, ya que lo he checado en diferentes plantillas

      Eliminar
  5. Wii *w* gracias, te lo pregunté yo xD
    tengo que probarlo pronto ^^
    un besoo♥

    ResponderEliminar
    Respuestas
    1. Ah, ya jajaj Pruebalo, y cualquier cosa me avisas :) Un besito

      Eliminar
  6. Wow cataa, me encanto este tuto. Me puedo llevar el fondo con el que hiciste la prewiev del tuto?.Es que me encanto ese fondo y le vendria bien a el proximo diseño de mi blog. Gracias

    ResponderEliminar
    Respuestas
    1. No, esta editado, además como lo vas a sacar de ahí? Es un motivo para el Photoshop

      Eliminar
  7. Y hay alguna forma para poner dos fondos en imagen? es decir, el 2º fondo en vez de un color html una imagen *0*
    Muchas gracias!
    Me sirvió de mucho :3

    B3sazos!

    ResponderEliminar
    Respuestas
    1. Lo puse más abajo, leiste todo? Dice, si queres que el fondo sea una imagen solo tenes que reemplazar lo del color por:
      background: url("URL de la imagen"); y ya esta :)

      Leaaaaan todo!

      Eliminar
  8. Mmm, no me sale u.u
    Lo hago tal cual, pero no me aparece ninguna imagen ni al principio, ni al final del blog :/

    ResponderEliminar
  9. Gracias Cata! Me rre sirvio, tube los mismos problemas chicas pero fui buscando!!


    SOS UNA GENIA CATA!! GRACIAS A VOS MI BLOG ES MUY CUTE :3

    ResponderEliminar
  10. No se ve los códigos en el primer layout de usd :c

    ResponderEliminar
  11. Hola Cata,Muchisimas gracias,ami tampoco me aparecía el codigo de html body,lo que me aparecía abajo era otra cosa,pero me sirvió igual! c:

    ResponderEliminar
  12. Gracias cata! Sos todo una genia! Ami me pasó igual, no me salió el código que ati te apareció, pero luego busqué Body { Y me dí cuenta de que era porque utilizaba otra plantilla! Gracias mil! Mira, si quieres te paso mi blog y miras, ya verás que ha funcionado. Te importaría hacerte seguidora por favor?
    www.yoselilla-panfu.blogspot.com
    Me falta mucho para tener un blog tan fantástico como el tuyo♥

    ResponderEliminar