4.5.10

Poner imagen de fondo en un blog


Vamos a Edición de HTML:

Diseño Plantilla Editar HTML Click dentro del editor Ctrl+f

2.- Localizamos el siguiente código, poniendo dentro del rectángulo de búsqueda (Search), una línea del mismo:

body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

3.- Agregamos lo que está resaltado, y el código deberá quedar así:

body {
background: url(Aquí la URL de la imagen) fixed repeat;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

4.- Las características con las que definimos posición y repetición de imágenes de fondo, son:
  • Con el valor no-repeat la imagen no se repite.
  • Con el valor repeat la imagen se repetirá horizontal y verticalmente, ocupando todo el fondo del blog.
  • Con el valor repeat-x la imagen se repetirá horizontalmente.
  • Con el valor repeat-y la imagen se repetirá verticalmente.
  • Con el valor fixed, la imagen será fija, sin él se desplazará con el contenido.
  • El valor top define la posición de la imagen: con left la ubica a la izquierda, con right a la derecha y con center al centro.
En nuestro caso hemos utilizado fixed y repeat, para que la imagen ocupe todo el fondo del blog y permanezca fija. Un ejemplo: aquí

Nota:

Este tutorial es aplicable a plantillas antiguas. Para plantillas nuevas ver: Imagen de fondo para plantillas nuevas

Índice Edición HTML
Poner imagen de fondo en un blog Cambiar enlaces pie de página
Eliminar enlaces pie de página Eliminar 'Publicado por'
Eliminar fechas Eliminar la hora
Efecto subrayar links Eliminar barra superior
Evitar copias de blogs Ocultar o eliminar sidebar
Eliminar y reemplazar cabecera Ícono para barra de direcciones
Centrar títulos posts Ensanchar blog
Cambiar color fondo posts Color fondo sidebar
Agregar una sidebar Color fondo de comentarios
Personalizar firma pie de posts Personalizar fechas de los posts
Diseñador de plantillas de Blogger Crear página de inicio o Portada
Eliminar enlaces a autores de plantillas Cambiar de sitio la sidebar
Centrar imagen de la cebecera

13 comentarios :

▼▲ Ocultar / Mostrar comentarios
Comentario escrito por Ana SaquitosDBB : #

Muchísimas gracias, me has sido de gran ayuda!

Comentario escrito por daycare-web : #

Hola Castorlux,
Por favor, necesito una ayuda en:
Quiero lograr mostrar/ocultar una imagen al marcar/desmarmar una casilla de verificacion. Llevo varios dias en esto y no he podido solucionarlo. He intentado muchas cosas, pero hasta ahora solo he logrado presentar la imagen oculta pero al marcar la casilla no se habilita la imagen.
En terminos de programacion escrita, te diria, que necesito:
evento 1: mostrar casilla verificacion + texto + imagen (hidden, sin href);(esto lo he logrado).
evento 2: si la casilla de verificacion es "true" mostrar evento 3 y si es "false" mostrar evento 1.
evento 3: mostrar imagen "visible" + href
Muchas gracias

Comentario escrito por Pedro Pablo Pachón : #

DaycareWeb: Aquí puede estar la solución:
http://www.webtaller.com/construccion/lenguajes/css/lecciones/ocultar-imagenes.php
Saludos.

Comentario escrito por Yaiba : #

ola no me sirve de mucha ayuda :S no se porque blogspot a cambiado las plantillas originales y ahora me interesa una en particular, solo me falta cambiar una cosa, es poner el fondo y que se quede fija, pero no se como, te paso todo el conjunto



la imagen no es real, pero quiero ponerla fija, es la que esta de fondo en la plantilla de Travel

ponme si sabes la contestacion en:

projectbeing@live.com

espero respuesta sino mi blog se queda vacio y es importante ya que recibo mas de 200 visitas diarias.

gracias

Comentario escrito por Yaiba : #

http://projectbeing.blogspot.com/

te paso la web, si esta bien colocada quiere decir que ya lo he solucionado, sino me gustaria saber la solucion o busco una plantilla nueva??

Comentario escrito por Pedro Pablo Pachón : #

Yaiba: Este tutorial puede serle útil:
http://bloguermast.blogspot.com/2010/10/imagen-de-fondo-blogger-plantillas.html
Saludos.

Comentario escrito por Antonio Guzman : #

Muy buena pagina y gracias por el apoyo que nos brindas, dios te bendiga

Comentario escrito por Pedro Pablo Pachón : #

Antonio: Gracias por tu visita tu comentario.

Comentario escrito por Bruno Malacara : #

estoy creando mi primer blog y la verdad no se mucho sobre esto asì que se te agradecen los consejos, gracias

Comentario escrito por Anónimo #

Hola tengo una pregunta como hacer que la imagen de fondo del blog se ajuste siempre al tamaño de la pantalla

Comentario escrito por Pedro Pablo Pachón : #

Raulgr17, Una imagen, en su versión original, no se puede adaptar a cualquier resolución. La única forma para que una imagen ocupe siempre todo el ancho de cualquier pantalla es utilizando la propiedad "repeat". Pero esta propiedad lo que hace es que la imagen se repita todas las veces que sea necesario para ocupar el tamaño de la pantalla.

Es como está en el código del punto tres del tutorial, para plantillas antiguas. Para plantillas nuevas el enlace al tutorial correspondiente está al final de éste.

Saludos.

Comentario escrito por Andrea Ca. : #

Hola como le hago para poner una firma imagen GIF??? ya he probado y probado y no me la agarra siempre me sale un error o no se ve nada

Comentario escrito por Pedro Pablo Pachón : #

Andrea, estuve en su blog y vi que ya puso la imagen. Felicitaciones.

En el siguiente tutorial se explica cómo personalizar la firma:

http://bloguermast.blogspot.com/2010/05/personalizar-firma-en-blogger.html

Saludos.

Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.

El autor.