Fijar background

NaRanJiTo78 · #1 (**permalink**) 21/05/2013, 11:00

Hola!

Tengo un problemilla que me está dando guerra:

En la versión movil de una web (http://www.iu95.es/mobile/) el fondo, a pesar de haber puesto:

Código:

background: url("../images/background_iphone_landscape.jpg") no-repeat fixed center top;color:#000;}

no se queda fijo y se sube cuando haces scroll...y me gustaría que quedara fijo en todas las páginas.

Qué estoy haciendo mal?

Gracias por adelantado!

Un saludo, muchas gracias

ArturoGallegos · #2 (**permalink**) 21/05/2013, 11:06

Por lo que he visto esa propiedad no es soportada en los mobiles, te paso dos links al respecto

http://www.quirksmode.org/blog/archi...fth_posit.html

http://www.quirksmode.org/m/css.html

NaRanJiTo78 · #3 (**permalink**) 21/05/2013, 13:51

No sabía que background:fixed no funcionaba en iOS...te agradezco la ayuda, pero sigue sin funcionarme, y he intentado investigar sobre el problema pero no doy con la solucion... :(

pzin · #4 (**permalink**) 22/05/2013, 04:49

Pon el fondo en otro elemento el cual especifiques una posición fija:

Código CSS:

Ver originaldiv#fondo {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: url("../images/background_iphone_landscape.jpg") no-repeat center top;
}

NaRanJiTo78 · #5 (**permalink**) 22/05/2013, 07:25

Muchas gracias, pzin, buena solución!

Lo único que ahora se ve el menú por debajo, que en realidad está oculto hasta que le pulsas a la tecla de menú y se desplaza hácia la derecha...y a pesar de que le pongo un z-index de -10, sigue apareciendo debajo de la foto...como podría solucionarlo?

Muchas gracias :)

pzin · #6 (**permalink**) 22/05/2013, 08:24

No debería de afecta el elemento del fondo a ninguna otra cosa.

¿En qué elemento pusiste el fondo y cual es el menú (elemento) que da problemas?

NaRanJiTo78 · #7 (**permalink**) 22/05/2013, 12:11

Tengo estructurado el index de la siguiente manera:

Cita:

<body class="bg1">
<div class="fondo1"></div>
<div id="social-icons">
<ul>
<li><a href="#"><img src="images/social/icon-facebook.png" alt="Facebook"></a></li>
<li><a href="#"><img src="images/social/icon-twitter.png" alt="Twitter"></a></li>
<li><a href="http://www.flickr.com/photos/iu_ranera/"><img src="images/social/icon-fliker.png" alt="Flickr"></a></li>

</ul>
</div>
<div class="clear"></div>
<div id="menu">
<ul>
<li class="active"><a href="index.html" class="contentLink" rel="external"><span><img src="images/icon-home.png" alt="Inicio"></span>Inicio</a></li>
<li><a href="prologo.html" class="contentLink" rel="external"><span><img src="images/icon-about-us.png" alt="Prologo"></span>Prólogo</a></li>
<li><a href="equipos.html" class="contentLink" rel="external"><span><img src="images/icon-team.png" alt="Equipos"></span>Equipos</a></li>
<li><a href="fotos.html" class="contentLink" rel="external"><span><img src="images/icon-portfolio.png" alt="Fotos"></span>Fotos</a></li>
<li><a href="videos.html" class="contentLink" rel="external"><span><img src="images/icon-videos.png" alt="Videos"></span>Videos</a></li>
<li><a href="contacto.php" class="contentLink" rel="external"><span><img src="images/icon-contact-us.png" alt="Contacto"></span>Contacto</a></li>
</ul>
</div>

Y las clases:

Cita:

@media only screen
and (max-width : 320px) {
.fondo1 {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: url("../images/background_iphone_portrait.jpg") no-repeat center top;
color:#000;
}
#menu {
width:175px;
height:100%;
display:block!important;
float:left;
border-top:solid #292d2f 1px;
z-index:-10;
} }

NaRanJiTo78 · #8 (**permalink**) 22/05/2013, 12:28

Y así se ve visualmente...

NaRanJiTo78 · #9 (**permalink**) 22/05/2013, 12:50

Es decir, el menú está entre la capa fija del fondo y el contenido...como puedo hacer para que el menú no se muestre si no se le da al botón?Donde tendría que colocar "display:none"?