Cambiar fondo del blog por una imagen


Y ahora vamos a ver qué debemos hacer para cambiar el fondo de nuestro blog por una imagen.

1- Entra a Diseño/ Edición de HTML.
2- En tu Plantilla busca el siguiente código: body { background:#000 margin:0; padding:40px 20px; OJO: el texto puede ser igual o parecido a éste, dependiendo de cuál sea tu plantilla;pero si no es igual, por lo menos tiene que ser similar.
3- Ahora vamos a trabajar con la parte que dice background:#000 . El #000 es el color actual de la plantilla, lo que tenemos que hacer es borrar el color ( en este caso #000) y reemplazarlo por el siguiente código:

url('LAIMAGENQUEQUIERESPONERDEFONDO')
Es decir, cuando cambies tu código debe versecomo: body { background:url('LAIMAGENQUEQUIERESPONERDEFONDO') margin:0; padding:40px 20px;
El resultado será algo así:



Sin embargo, si tu imagen no es lo suficientemente grande, se repetirá formando una especie de mozaico; si deseas que esto no sea así, que no se repita sino que se quede estático, agrega este código debajo de body { background:url('LAIMAGENQUEQUIERESPONERDEFONDO') margin:0; padding:40px 20px;:

background-attachment: fixed;
Espero que el código te sirva; ahora busca una buena imagen y aplíca el truco !

19 opinaron:

Fabiola

Hola YK
primero felicitarte por la ayuda que nos prestas.
Bueno quería saber si el codigo body... está al principio, medio o al final de la plantilla.

Es muy poco demoroso estar leyendo la plantilla completa asi que si pudieras darme algun truco para buscar en la plantilla (si es que exsite ) te lo agradecería.

Responder
YK

Fabiola
Sabes, tu pregunta me dió una idea para un próximo post: hablar sobre los trucos más básicos, pero que son muy importantes.
Bueno, pasando a tu pregunta,está casi al principio y tienes razón, es algo incómodo ir buscando por toda la plantilla, pero para eso hay una solución:
oprimes Ctrl+F y te aparecerá un cuadro de diálogo; en ese cuadro, colocas lo que quieres buscar en la plantilla y te llevará directamente hacia ahí.

Gracias por tu comentario y espero que te sirva.
Saludos.

Responder
Fabila

Muchas gracias ; me ayudó a no estar leyendo toda la plantilla. Y me gustaría leer pronto esa nota sobre los trucos básicos.

Responder
YK

Qué bueno que te haya ayudado a ahorrar tiempo...y bueno, el post sobre trucos básicos se viene pronto.

Responder
Anónimo

muy bueno tu blog..
entre porque andaba buscando el resumen de "los miserables"
me encantaria que vos tmb entraras a mi blog..
me despido..
saludos..

arieldasca.blogspot.com

Responder
YK

Gracias por la visita al blog. esperamos tenerte más seguido y por supuesto, me daré una vuelta por tu blog.

Saludos

Responder
Gildo

Muy bueno tu blog, creo que sirve mucho para ayudarnos a los profanos en esta materia(lease blog), aunque eso de probar con codigos html, no se me da un poco de yuyu.
Salud y suerte.

Responder
YK

Gildo: gracias por la visita y bueno, creo que deberías de animarte a probar con diferentes HTML, CSS, etc...claro, si tienes duda, puedes preguntarme.

Saludos

Responder
Javier

Hola, bueno ante todo las gracias por querer ayudar.

Ya puse la imagen, pero aparece en mosaico y no la quiciera asi... ademas de que la pienso retocar jejeje.

Bueno te dejo la direccion del blog por si me puedes ayudar y la parte del codigo que inserte a ver si pillas que esta mal:
http://javiermgaleano.blogspot.com/

body {
background-image: url(http://lh5.ggpht.com/_ce8QM1Gn0SM/SS8BwFHxgOI/AAAAAAAAACk/C8cPmB892Qk/s640/P1010283.jpg);
background-attachment: fixed;


Te agradesco la ayuda

Responder
YK

Javier: bueno, voy a revisar tu blog; si pudieras te agradecería que me envíes la plantilla a mi correo ( que podrás verlo en la sidebar donde dice "Sobre este blog / e-mail") para poder probarla en en mi blog de pruebas y ver cuál es el error.

Saludos

Responder
YK

Javier:

Encontré el problema del fondo de tu blog; tienes que poner esto:

body {
background: url(http://lh5.ggpht.com/_ce8QM1Gn0SM/SS8BwFHxgOI/AAAAAAAAACk/C8cPmB892Qk/s640/P1010283.jpg);
background-attachment: fixed;
background-repeat: no-repeat;

Sin embargo, el problema es la imagen en sí: es muy pequeña; deberías de conseguir una imagen un poco más grande.

Si tienes más dudas, me avisas.
Saludos

Responder
Smark

Muchas gracias por la información pero tengo un problema lo que pasa es que yo tengo la plantilla minima black y cuando cambio el fondo se cambia todo :( incluso en de la sidebar y de las entradas, hay alguna forma para cambiar de fondo pero solo lo de los lados sin afectar las dos columnas antes mencionadas?? :$

bueno me despido y muchas gracias por tu ayuda

www.mundosmark.blogspot.com

Responder
Jéssica YK

Smark: espero haber entendido bien tu pregunta. Lo que quieres es poner una imagen de fondo, pero que toda la parte central del blog permanezca con fondo negro?. Si es lo que quieres hacer, sigue los siguientes pasos.

Primero has lo que se indica en el post. Luego, has lo siguiente:

-Con ayuda de Ctrl+F busca #outer-wrapper {
-Debajo de éste, pega el siguiente código: background: #000;

Si no era lo que querías, lo único que tendrás que hacer es borrar la línea que pegaste background: #000; En todo caso, si me explicas mejor podría ayudarte.

S@lu2

Responder
Smark

Muchas gracias es exactamente lo que quiero hacer en cuanto pueda lo echare en marcha :D

y sobre todo muchas gracias por agregar mi blog a tus enlaces de verdad es algo muy importante para mi :)

Responder
Jéssica YK

Smark: si tienes alguna duda, me avisas para ayudarte.
Gracias por la visita

S@lu2

Responder
katy mar

Nena deje una pregunta espero me hagas favor de contestarme gracias.

Jéssica YK

» katy mar:
Contesté tu pregunta en el post del menú.

Disculpa por la demora en responder.

S@lu2

Responder
ロペスアレクシス

HOla realmente me funciono mucho esto deveras tu blog esta excelente con el contenido de tu blog podre aprender mucho muchas gracias.saludos :) ;)

Jéssica YK

» ロペスアレクシス:
Gracias ^^ Eres bienvenida y si necesitas mi ayuda no dudes en preguntar.

S@lu2

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio