Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de imagen de fondo siempre en mismaposición (con scroll) en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/06/2010, 08:35
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 841
Antigüedad: 12 años, 8 meses
Puntos: 9
imagen de fondo siempre en mismaposición (con scroll)

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
  #2 (permalink)  
Antiguo 04/06/2010, 10:06
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: imagen de fondo siempre en mismaposición (con scroll)

probaste utilizando position:fixed;

  #3 (permalink)  
Antiguo 04/06/2010, 12:07
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 841
Antigüedad: 12 años, 8 meses
Puntos: 9
Respuesta: imagen de fondo siempre en mismaposición (con scroll)

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
  #4 (permalink)  
Antiguo 05/06/2010, 16:01
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 841
Antigüedad: 12 años, 8 meses
Puntos: 9
Respuesta: imagen de fondo siempre en mismaposición (con scroll)

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>
<!--[if gte IE 5.5]><![if lt IE 7]>
<style type="text/css">
div#fixmetoo {
right: auto;
bottom: auto;
left: expression( ( 0 - fixmetoo.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 - fixmetoo.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
</style>
<![endif]><![endif]-->

</head>
<body>


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

<div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

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

</div>


</body>
</html>
Un saludo.

Javier
  #5 (permalink)  
Antiguo 05/06/2010, 16:27
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: imagen de fondo siempre en mismaposición (con scroll)

solo como dato las expresiones de IE invalidan nuestra CSS y hay un par de alternativas validas en las FAQS
  #6 (permalink)  
Antiguo 05/06/2010, 16:43
Avatar de _cronos  
Fecha de Ingreso: abril-2010
Mensajes: 135
Antigüedad: 7 años, 8 meses
Puntos: 1
Respuesta: imagen de fondo siempre en mismaposición (con scroll)

¿Y algo así?

Código CSS:
Ver original
  1. html, body{width:100%;height:100%;overflow:hidden;}
  2. .img_bg{width:100%;height:100%;position:absolute;z-index:1; bottom:0; right:0;}
  3. .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 (:
__________________
'Dadme un punto de apoyo y moveré el mundo' - Arquímedes
Alianza DIOSES [-GOD-] Ikariam - Mundo Ny (s13)
  #7 (permalink)  
Antiguo 06/06/2010, 04:13
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 841
Antigüedad: 12 años, 8 meses
Puntos: 9
Respuesta: imagen de fondo siempre en mismaposición (con scroll)

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
  #8 (permalink)  
Antiguo 06/06/2010, 11:05
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: imagen de fondo siempre en mismaposición (con scroll)

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
  #9 (permalink)  
Antiguo 07/06/2010, 07:31
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 841
Antigüedad: 12 años, 8 meses
Puntos: 9
Respuesta: imagen de fondo siempre en mismaposición (con scroll)

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
  #10 (permalink)  
Antiguo 07/06/2010, 09:35
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: imagen de fondo siempre en mismaposición (con scroll)

el_javi que bueno suerte
  #11 (permalink)  
Antiguo 07/06/2010, 09:37
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 841
Antigüedad: 12 años, 8 meses
Puntos: 9
Respuesta: imagen de fondo siempre en mismaposición (con scroll)

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

Etiquetas: fondo, scroll, siempre
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:35.