Cómo poner una imagen en la esquina del blog

Me pregunta Espineli cómo poner la imagen fija de la esquina inferior derecha (no funciona en Iexplorer ¿para qué usas Iexplorer?) y como no es nada del otro mundo y es algo muy extendido en los blogs, lo voy a explicar para quien quiera ponerlo en el suyo.

pollo.jpg

Lo único que necesitamos es tocar dos archivos: la hoja de estilos y el de plantilla (normalmente el pie de página).

En la hoja de estilos ponemos lo siguiente (nosotros llamamos a ese elemento “bean” en honor a la primera imagen que pusimos, pero lo podéis llamar como queráis):

div#bean{
position: fixed;
right: 0;
bottom: 0;
display: block;
height: 234px;
width: 150px;
background: url(‘tu-imagen.gif‘) bottom right no-repeat;
text-indent: -999em;
text-decoration: none;
*display: none;
}

Poniendo en lugar de tu-imagen.gif la ruta a la imagen.

Y en el archivo de plantilla (por ejemplo footer.php) se pone al final, justo antes del </body>

<div id="bean"></div>

A propósito de todo esto, hemos puesto al final de la página de Historia del Pito Doble un histórico de los “beans” que hemos ido poniendo. ;-)

24 Comments

  1. quartermain, en la págin a… al menos en firefox, los dos ultimos dos pollos se (lo) montan xDDDDD y entre medusas y birras menuda fiesta!

  2. Las medusas me daban yuyu…

  3. A Garrafa le despertaban instintos homosexuales…

  4. Gracias por la explicación y el post, lo intentaré a ver que pasa. Miles de gracias Pito doble.;)

  5. yo aprovechare este verano tb para poenrlo en gif k esta muy kieto el mio

  6. Muy buenos los “bean”, aunque ahora no lo tienes puesto en el blog o a mi no me sale, una cosilla me podrias recomendar algun programa “gratuito” para hacer gif animados muchas gracias y feliz verano.

  7. Sí que está puesto el “bean” del pollo cervecero. Si no lo ves ¿no será porque estás usando Internet Explorer? Mira que eso es pecado… Pásate a Firefox!!

  8. “Quatermain” uso ambos pero lo que me resulta raro es que siempre lo vi con internet explorer o con el fierefox, pero el nuevo ni de coña.

  9. Pues raro raro raro raro… ^o)

    ¿Alguien más no ve la imagen en Firefox? :|

  10. Donde no se ve de ninguna de las maneras es en IE (ver. 7.0 y pico), ni falta que hace que se vea (n), pero con FF sin problemas se ve perfecto ;) , conclusión:
    IE es una m…. pinchada en un palo. (con perdón).
    Gracias por compartir el secreto del dibujo de la “esquina inferior derecha” (jo eso parece una tabla de gimnasia), vi algo parecido hace unos día y lo puse en mi blog (asi aprovecho para hacer publicidad) Imagen flotante con efecto de ??ir arriba? :$
    Salud a todos.

  11. Quatroman que te crees A nieto…. de garrafón

  12. (i) Pues no estaría nada mal que Anieto sacara un plugin para esto de la imagen de la esquina y así poder gestionar su cambio con facilidad. ¿Alguien se lo propone?

  13. Para una vez que se pone serio…

  14. Pues yo el mio le pongo simplemente escribiendo esto entre las etiquetas BODY de index.php, single.php y page.php

    PD: ¿que os parece?

  15. Hay que poner esto, que no salía:
    (Quitando el espacio entre

  16. aa esto si que es bueno, pero lastima que no se vea en IE ya que la mayoria tienen ese explorador hay que ser un poco realistas xD .. pero buen detalle ese del pollo :mrgreen: aa y gracias por la info un saludo(a)

  17. T____T:cry: No consigo ponerloOO!!

  18. hola kiero poner una imagen de las k dices funciona en wordpress 2.5.1? porke veo k ya no la usan

    saludos

  19. HOYGAN ke a mi tampoco me finciona la kosa en mi blog, podra pasar el señor quaterman a mirar kual es mi provlema? grazias xD

  20. BUENO SI QUE SE VE CON INTERNET EXLORE AL MENOS EN SU VERSION 8(banano)

  21. y como hago para poner un enlace a la imagen?

  22. En IE me da problemas. Probad con:

    BODY {
    background-image: url(“http://img120.imageshack.us/img120/6125/gatitotf9.gif”);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: bottom right;
    }

Comments are closed.

© 2016 El Pito Doble

Theme by Anders NorenUp ↑