Posición de fondo de CSS no funciona en Mobile Safari (iPhone/iPad)

Tengo un problema con la posición de fondo en el safari móvil. Funciona bien en otros navegadores de escritorio, pero no en iPhone o iPad.Posición de fondo de CSS no funciona en Mobile Safari (iPhone/iPad)

body { 
background-color: #000000; 
background-image: url('images/background_top.png'); 
background-repeat: no-repeat; 
background-position: center top; 
overflow: auto; 
padding: 0px; 
margin: 0px; 
font-family: "Arial"; 
} 

#header { 
width: 1030px; 
height: 215px; 
margin-left: auto; 
margin-right: auto; 
margin-top: 85px; 
background-image: url('images/header.png'); 
} 

#main-content { 
width: 1000px; 
height: auto; 
margin-left: auto; 
margin-right: auto; 
padding-left: 15px; 
padding-right: 15px; 
padding-top: 15px; 
padding-bottom: 15px; 
background-image: url('images/content_bg.png'); 
background-repeat: repeat-y; 
} 

#footer { 
width: 100%; 
height: 343px; 
background-image: url('images/background_bottom.png'); 
background-position: center; 
background-repeat: no-repeat; 
}

Tanto "background_top.png" y "background_bottom.png" se alejan demasiado a la izquierda. He buscado en Google, y hasta donde puedo decir, la posición de fondo IS es compatible con safari móvil. También probé todas las combinaciones de palabras clave ("arriba", "centro", etc.), px y%. ¿Alguna idea?

Gracias!

Actualización: aquí está el marcado en el archivo .html, que muestra la multa disposición de diseño & en otros navegadores: (I también actualizó el css arriba)

<html lang="en"> 
<head> 
    <title>Title</title> 
    <link rel="Stylesheet" type="text/css" href="styles.css" /> 
</head> 
<body> 
    <div id="header"></div> 
    <div id="main-content"></div> 
    <div id="footer"></div> 
</body> 
</html>

Ambas imágenes de fondo son muy amplios (~ 2000px) para ocupar espacio en cualquier navegador de tamaño.

P.S. Sé que probablemente haya unos pocos atajos de CSS más eficientes que podría estar usando, pero por ahora me gusta tener el código organizado como lo tengo para la visibilidad.

Fuente

2010-07-06 Nick

¿Se puede incluir el marcado también? Tal vez el problema radica en el marcado. –

Ok, lo actualicé con más código – Nick

@Nick ¿Oye, lo tienes funcionando? Por favor comparte el código. –

-1

Esto podría ser causado por las dimensiones de su (s) sprite (s). Consulte http://teknocat.org/blog/computer-stuff/web-development/show/6/mobile-safari-background-image-scaling-quirk para obtener una descripción completa y posibles soluciones.

Fuente

2010-11-24 02:32:47 s1mm0t

downvoting this ya que la URL ya no es válida. – KenB

Aparentemente, cuando "desplaza" en un iPhone/iPad, no está desplazando la página de la misma forma que lo hace en un navegador de escritorio. Lo que estás haciendo es más como mover toda la página dentro de una ventana gráfica. (Estoy seguro de que alguien me va a corregir si uso la terminología incorrecta aquí)

Esto significa que la posición de fondo: fija sigue siendo "compatible" pero no tiene ningún efecto real, ya que toda la página se mueve dentro de la ventana gráfica en lugar del contenido de la página que se desplaza dentro de la página.

Fuente

2010-12-06 16:35:50 Squig

que tienen este problema y estoy hacerle frente al deshacerse de mi pie de página fija usando un estilo separada como se ha mencionado aquí: How to target CSS for iPad but exclude Safari 4 desktop using a media query?

Fuente

2011-01-19 19:19:01

El navegador/Webkit iPhone no puede centrar las imágenes de fondo align cuando se coloca en el cuerpo de la etiqueta . La única forma de evitar esto es eliminar la imagen de fondo de su etiqueta corporal y usar un DIV adicional como envoltorio.

#wrapper { 
background-color: #000000; 
background-image: url('images/background_top.png'); 
background-repeat: no-repeat; 
background-position: center top; 
overflow: auto; 
} 


<html lang="en"> 
<head> 
    <title>Title</title> 
    <link rel="Stylesheet" type="text/css" href="styles.css" /> 
</head> 
<body> 
    <div id="wrapper"> 
    <div id="header"></div> 
    <div id="main-content"></div> 
    <div id="footer"></div> 
    </div> 
</body> 
</html>

Fuente

2011-02-27 17:28:57 Jimbola

Se va a trabajar con

background-position-x: 50%; 
background-position-y: 0%;

y todavía añadir

background-position: center top;

para otros navegadores.

Fuente

2013-08-22 11:03:30 leymannx

crear un ID de envoltura para colocar en el cuerpo, a continuación, incluir el siguiente CSS:

#background_wrap { 
    z-index: -1; 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background-size: cover; 
    background-image: url('../images/compressed/background-mobile.png'); 
    background-repeat: no-repeat; 
    background-attachment: scroll; 
}

Sólo hay que asegurarse de que ninguno de su contenido va dentro del div de lo contrario toda la página se fija sin desplazamiento.

Fuente

2015-01-13 09:44:56 lg365

Posición de fondo de CSS no funciona en Mobile Safari (iPhone/iPad)

Respuesta

Cuestiones relacionadas