Com tenir una imatge fixa a l'esquina del navegador per CSS

Hacker

Ací tinc avui un truquillo molt xulo que sempre havia pensat fer però encara no l'havia provat perquè el meu temps no és infinit. Durant aquest matí, al curs de CSS avançat que estic fent a la Diputació, m'ha eixit finalment el truc de com mostrar una imatge fixa a l'esquina del navegador amb CSS, així pots escriure molts continguts diferents a les pàgines però encara que baixes amb l'scroll del navegador la imatge sempre es mantindrà fixa creant un efecte molt elegant. La imatge que veus és una captura de pantalla d'aquest resultat (he fet servir una imatge de Cameron Díaz, per supost)... i ací a continuació tens el codi CSS:


#contenedor {
margin: 0 auto;
width: 600px;
background-color: #666666;
border-left: 25px dashed #000;
border-right: 25px dashed #000;
padding: 0 50px 0 10px;
}

#cameron{
position: absolute;
bottom: -5px;
right: 17px;
}

@media screen {
div#superficie {position: fixed; bottom: 0px; right: 0px;}
* html {overflow-y: hidden;}
* html body {overflow-y: auto; height: 100%;padding: 0;}
* html div#superficie {position: absolute;}
}
body > div#cameron{
position: fixed;
bottom:0px;
right:0px;
}

I també ací tens el codi XHTML que has d'afegir al teu document:

Doncs bé això és tot, espere que trobes útil aquest article i que et motive a compartir els teus trucs, els teus coneixements i els teus experiments amb el Programari Lliure. Pensa-ho, va, que la Comunitat del Programari Lliure va creixent gràcies a la documentació, el disseny, la formació o la programació, sigues part de la Comunitat :-)

La cultura i la lliure circulació de les idees és l'arma més efectiva contra les dictadures del pensament i contra la ignorància.