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 comentarios

  1. eL FRuTeRo

    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. RuFo

    Las medusas me daban yuyu…

  3. Quatermain

    A Garrafa le despertaban instintos homosexuales…

  4. Espineli

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

  5. Javi J.

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

  6. comolavida

    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. Quatermain

    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. comolavida

    «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. Quatermain

    Pues raro raro raro raro… ^o)

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

  10. Toni

    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. Garrafa

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

  12. Quatermain

    (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. toni

    Para una vez que se pone serio…

  14. rmoralf

    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. rmoralf

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

  16. rmoralf

    Vaya m*****, no sale. Miradlo aqui, en un txt.

    http://www.gratisweb.com/rmoralf/imagen.txt

  17. Demox

    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)

  18. eo

    no funca en blogger

  19. yeyo12st

    T____T:cry: No consigo ponerloOO!!

  20. nadie007

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

    saludos

  21. araque

    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

  22. rafa

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

  23. juan carlos

    y como hago para poner un enlace a la imagen?

  24. antonio

    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;
    }

© 2020 El Pito Doble

Tema por Anders NorenArriba ↑