imagen de fondo siempre en mismaposición (con scroll)

el_javi · #1 (**permalink**) 04/06/2010, 07:35

Hola a todos.

Me trae de cabeza un tema.

tengo una imagen de fondo que necesito que siempre esté abajo a la derecha en mi pantalla.

Si tengo Scroll porque hay mucho contenido necesito que esté abajo a la derecha PERO no del contenido, sino de la ventana del navegador, OSEA: que SIEMPRE esté visible.

¿Es posible plantear esto con css?
Si no es posible con css. ¿cómo lo haríamos con Javascript?

Gracias de antemano.

Un saludo.

Javier

DragonX · #2 (**permalink**) 04/06/2010, 09:06

probaste utilizando position:fixed;

el_javi · #3 (**permalink**) 04/06/2010, 11:07

Hola DragonX

Gracias por tu pronta contestación y tan ÚTIL.

La verdad que desconocía dicha propiedad CSS la cual he aplicado y rápida mente estaba conseguido lo que yo quería.

Lo único que veo es que en Internet Explorer 6 es el único navegador que no me trabaja bien la propiedad.

Yo estoy ubicando ABAJO a la derecha, y he usado esta programación CSS:

Código:

    position: fixed;
    bottom: 0;
    right: 0;
    width: 348px;
    height: 285px;
    background-image: url(../img/imagen.png);
    background-position: bottom right;
    background-repeat: no-repeat;

¿Alguna ayuda al respecto?

Gracias de antemano.

Un saludo.

Javier

el_javi · #4 (**permalink**) 05/06/2010, 15:01

Bueno pues finalmente me busqué la vida y encontré la solución a esto de una manera fácil y sencilla, probado en los siguientes navegadoreS:
- Internet Explorer 5.5
- Internet Explorer 6
- Internet Explorer 7
- Internet Explorer 8
- Firefox 2 y 3
- Opera 10
- Safari para PC Versión 4.0.5

En todos ellos funciona perfectamente 8el ejemplo que os pongo ahora y la adaptación a mi Web).

Espero que os sea útil a vosotros también.

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>Making Internet Explorer use position: fixed;</title>
<style type="text/css">
#fixmetoo {
position: absolute;
right: 0px;
bottom: 0px;
}
div > div#fixmetoo {
position: fixed;
}
</style>


</head>
<body>

<h1>Making IE 5.5+ use position: fixed;</h1>

<div>
 

<div id="fixmetoo" style="border:2px solid #000;border-bottom:none;border-right:none;background-color:#fff;text-align:center;padding:10px;">
F i x   M e   T o o
</div>

</div>

</body>
</html>

Un saludo.

Javier

alexk · #5 (**permalink**) 05/06/2010, 15:27

solo como dato las expresiones de IE invalidan nuestra CSS y hay un par de alternativas validas en las FAQS

_cronos · #6 (**permalink**) 05/06/2010, 15:43

¿Y algo así?

Código CSS:

Ver originalhtml, body{width:100%;height:100%;overflow:hidden;}
.img_bg{width:100%;height:100%;position:absolute;z-index:1; bottom:0; right:0;}
.all{width:100%;height:100%;overflow:auto;left:0;z-index:2;}

Este ejemplo lo saqué de un web hace tiempo pero no me acuerdo de la URL.
Saludos (:

el_javi · #7 (**permalink**) 06/06/2010, 03:13

Hola!!!

alexk
Gracias por tu contestación, aporte y aviso de la NO validación del CSS.

Este código con expresiones, lo he puesto como "hack" para SOLO Internet Explorer. Imagino que al ser solo 1 fichero CSS y aplicado SOLO para IE inferior al 7, no anulará la validación TOTAL del CSS.

He mirado en las FAQs, y la solución dada por nuestra amiga Tunait, no me acordaba, pero ya la había visto, probado y cambiado y en IE6 no funciona.

_cronos
La forma que tú comentas, de mantener un contenedor en posición absoluta y posicionado abajo a la derecha, tampoco me funcionó.

De momento, dejaré las expresiones, y si surge alguna otra manera validada y apta para IE6, la usaré.

Muchísimas gracias por vuestros comentarios.

Un saludo.

Javier

alexk · #8 (**permalink**) 06/06/2010, 10:05

la solucion de mikmoro es valida y funciona en IE6
http://araudi.net/ejemplos/IE6fixed.html

habia otra de daPhyre pero nu recuerdo la url jeje igual funciona era un metodo parecido pero bueno... tambien son similares con la que te pone _cronos y si funciona

el_javi · #9 (**permalink**) 07/06/2010, 06:31

Hola a todos.

Muchas gracias por vuestros comentarios y ayudas.

Finalmente he sido capaz de montarlo con la ayuda del comentario de _cronos y el enlace de apoyo de alexk

Muchísimas gracias por vuestra ayuda!!!!

Javier

alexk · #10 (**permalink**) 07/06/2010, 08:35

el_javi que bueno

suerte

el_javi · #11 (**permalink**) 07/06/2010, 08:37

Os dejo el enlace de la Web que estoy montando para que veáis el resultado de vuestra ayuda :)

http://www.pitbullsport.es/newWeb/

Espero opiniones y comentarios

Javier