24

¿Como poner una imagen de fondo para blog blogger?

-Debemos ir a diseño de la plantilla. Hacer clic en Edición de HTML "no Expandir plantillas de artilugios" , buscar lo siguiente:

body {
background:$bgcolor;
...
}


(El código está al principio de la plantilla "no tiene perdida)

-Ahora agregar después de background:$bgcolor lo siguiente "lo que está de color Rojo":

body {
background:$bgcolor url(http://Aquí la direción de la imagen) fixed no-repeat top left;
...
}


-Si la imagen no se ajusta,cambia por los siguientes valores:

-no-repeat (la imagen no se repite)
-repeat-x (repetirá la imagen horizontalmente )
-repeat-y (repetirá la imagen verticalmente )
-repeat (la imagen se repetirá horizontal y verticalmente)
-fixed ( la imagen se desplazará con el contenido o será fija)
-top left (la posición de la imagen)

Ejemplos:
-body {background:$bgcolor url(http://Aquí la direción de la imagen) fixed repeat-x top left;

-body {background:$bgcolor url(http://Aquí la direción de la imagen) fixed repeat-y top left;

-Entendéis,el único valor que cambia para ajustar la imagen es el valor marcado en rojo,(como podéis apreciar en los ejemplos),para la imagen de fondo vais a Google en " imagenes " y buscáis imagenes que os gusten para el diseño de vuestro blog. Debéis tener en cuenta que la imagen sea "grande" a ser posible "Wallpaper", pero tener en cuenta que "demasiados pixeles"(mas de los debidos) harían que el blog al cargar tardase mas en el proceso,y eso no interesa así que elegid un tamaño "no mayor" de 1.500 Pixeles.

Ejemplo , Huevos fritos de fondo:

Fuente Imagen: http://humorisas.boosterblog.es/ .

24 comentarios:

Humberto dijo...

Exelente ayua, lo pruebo que honda con la imagen gracias loco, blog tra de ganar algo de plata en internet.
http://formas-de-ganar.blogspot.com

Si ves alguna imagen es gracias a tu ayuda, jejeje.

sweetxgirl dijo...

No me sirve ! pongo todo lo que tu dices pero al ver los cambiios sigue igual!

Daniel dijo...

swetxgirl: la parte background,es facilmente diferenciable,al principio de la plantilla,debe quedarte así:

body {background:$bgcolor url(http://Aquí la direción de la imagen) fixed no-repeat top left;...}

donde pone la imagen pones una URL de imagen de mas de 1.500 pixeles "tipo wallpaper" ya que ¡seguramente la hayas puesto mas pequeña y no la puedas ver!,OK ¡no hay mas! es muy sencillo!,cuando lo consigas te darás cuenta,intenta también que sea formato "JPG" o similar.

muchas gracias por ala ayuda ..... de verdad si sabes otros trucos por fa haslos conocer ... muchas gracias,,,, exelente ,,,

EdHdez. dijo...

quiero colocar una imaguen de mis archivos como lo hago??

Daniel dijo...

Hola EdHez: es fácil necesitas "una URL de la imagen",por lo cual debes subir tu imagen "de tus archivos" a un alojamiento gratuito "donde te da la url" la cual debes poner detrás de "Background:"

En este Blog puedes encontrar sitios gratuitos donde alojar tu imagen y poder usarla,busca en etiquetas "cosas simples" en la barra lateral,un saludo.

oscar_barreiro dijo...

ola yo keria k me pusieras como kedaria tod para poner la imagen en el post gracias

walter guasco dijo...

como hago para hubicar la misma imagen de fondo para los dos costados ?

Daniel dijo...

Hola,creo que esta muy claro "Walter",tienes que buscar una imagen "grande" tipo "wallpaper" para fondo de blog de unos 1.600 x 1400 mas o menos...

luego :

Si la imagen no se ajusta,cambia por los siguientes valores:

-no-repeat (la imagen no se repite)
-repeat-x (repetirá la imagen horizontalmente )
-repeat-y (repetirá la imagen verticalmente )
-repeat (la imagen se repetirá horizontal y verticalmente)
-fixed ( la imagen se desplazará con el contenido o será fija)
-top left (la posición de la imagen)

y la ajustas según preferencias,animo ¡que seguro lo consigues,un saludo.

Captain dijo...

hola he hecto todo lo que dices y no me sale aqui una muestra:

body {background:#e6e6e6url(http://img11.imageshack.us/content.php?page=done&l=img11/9030/dsn2.jpg&via=mupload)fixed no-repeat top left;...}

AYUDA URGENTE POR FAVOR

nekoru dijo...

PERO ESO SOLO VALE PARA EL FONDO ALGUIEN SABE COMO PONER EN EL CUERPO DE LA PLANTILLA???

muchas gracias por todo un saludo.

Anónimo dijo...

Sii sta chevere pero lo que qiero saber es como se hace para poner fotos grandes de fondo en el titulo de tu blog como el ejemplo q pusistes q salia CHISTES%FOTOS q ahi tiene un fondo d eun niñito... qiero saber como hacere esoo!!! porfa diimee

Anónimo dijo...

Necesito ayuda urgente para mi blog enserio esque lo malogre y por mas que tengo el codigo que tenia antes no se aregla nada si alguien sabe bien sobre fondos de blog blythe85@hotmail.com si n sabes no me agregues Graciasss . :(

Anónimo dijo...

Hola alguien me podria ayudar porfavor con mi blog no se nada de esto le digo auna amiga que me ayud epro dice que no puede porque los codigos estan mal nose :( porfavor quisiera comenzar a utilizar mi blog y hace tiempo que no logro ponerlo como quisiera bueno si alguien me podria ayudar se los agradeceria me llamo Yanira les dejo mi email blythe85@hotmail.com un beso chicos

Anónimo dijo...

Ya hice esto pero no sale nada y en mi blog se pone entre las entradase scritas body {background:$bgcolor url(http://photos3.hi5.com/0116/450/126/Ye.17d450126-02.jpg
) fixed no-repeat top left;...}
que puse mal???

blythe85@hotmail.com

Dant3d dijo...

señor muchas gracias, estaba como loco buscando esto, se ve de lo mejor ahora, soy nuevo en esto de los blog.

Hola, quisiera que me ayudaran en introducir una imgan gif que he diseñado para mi blo en la cabecera. La imagen la tengo alojado en un servidor y me funciona correctamente. De antemano gracias. Un saludo.

tienes que copiar la url de la imagen
le das clic derecho ensima de la foto luego entras en tu blog pulsas en la pestaña diseño...
abajo te apareceran 3 obciones

elementos de la pagina edicion HTML y diseño de plantillas pues pulsas en edicion HTML.

AHORA BUSCA EN TU PLANTILLA ESTA ZONA.

#header {
margin: 5px;
height:225px;background-image:url(LUEGO PEGAS AQUI DENTRO EL CODIGO QUE COPIASTE ANTES);
border: 5px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;

DE ESTA FORMA TENDRAS LA IMAGEN EN TU BLOG

SI QUIERES TENER UNA IMAGEN DE FONDO DEL BLOG PEGA ESTE CODIGO AQUI MISMO

body {background:url(PEGAR CODIGO AQUI)
$bgColor;
margin: 0;
padding: 0px;
font: x-small Verdana, Arial;
text-align: center;
color: $textColor;
font-size/* */:/**/small;
font-size: /**/small;

SOLO COPIA LA PARTE DONDE PONE BRAGRAUN URL EL RESTO DEL CODIGO YA ESTA EN TU BLOG.

espero aber podido ser de ayuda. pd puedo aberme equibocado en el lugar de la imagen

Sirena dijo...

holaaaaa,gracias por tanta ayuda,y yo quiero poner un fondo,pero como borro el que ya tengo????porfe ayudame,gracias te dejo bechitos

Miguel Ureta dijo...

Muchas Gracias!!!
Un saludín desde la Casa de Andalucía de Logroño!!!!

Carmen dijo...

hola tengo un fondo que le di mejor color pero al ponerlo a 1526x1080px me da 1,5mb y al subir la foto para el fondo me dice que solo 300kb y q la foto sea 1800x1600 pero no me deja dice tamaño grande la mia, que hago y si la subo pequeña me queda horrible el fondo se repite 2 veces en horizontal, esto es el codigo fuente



ayudarme gracias

Daniel dijo...

Carmen:

Hola,haz una cosa ese fondo que editaste,subelo a imageshack
una vez subido, copias la "url" de la imagen y la pones a partir de: body {
background:
como se indica en el post,deberia quedarte algo así en la Plantilla:
Ejemplo:

background:url(http://www.enviarporemail.com/wp-content/uploads/2011/09/fondo-de-pantalla-bolas-purpuras.jpg) fixed repeat top left;

Espero te sirva,supongo que si tiene restricción de tamaño será el alojamiento donde subias la imagen.Usa uno que admita tamaños grandes para fondo del blog como el indicado.

Un saludo ;)

Lucia Garcia dijo...

Lamentablemente no puedo encontrar lo 1º medice:body background:$ o algo asi

Daniel dijo...

púes eso es ;)

body {
background:

(Lo tienes cerca del comienzo de la plantilla)Usa con tu teclado pulsa: "Control+F" y se te habre un cuadro de busqueda,despúes de encontrar el "body {
background:" solo debes agregar la imagen (sustituyendo):

body {
background:$bgcolor url(http://Aquí la direción de la imagen) fixed no-repeat top left;
...
}

Gracias por comentar.

El comentario se publicará en breve.