2011-01-19 13 views
8

molestofondo es tan ancha como visor problema

Cuando el zoom-in en la ventana de visualización (que ocurre en Firefox, Chrome) y luego desplazarse horizontalmente a la derecha, mis imágenes de fondo se recortan

la imágenes representa mejor lo que está sucediendo:

zoom en

zoom in - imagen es solamente tan amplia como visor

manera Alejar - problema no se produce

zoom out - problem gone

Estas son algunas secciones de mi css que podrían ser relevantes:

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body{ width: 100%; } 
header#header { width: 100%; } 
header#header #background-image { 
    height: 150px; 
    background: url(/images/header/silhouette.png) repeat-x; 
} 

Esto sucede con y sin cssgradients aplicadas demasiado - realmente perplejo aquí

+2

¿Intentaste para establecer en # background-image 100% width también? – stecb

+2

Nunca he visto 'header' o cosas como' figcaption' ser elementos en HTML como 'body' o' div' ... ¿eso incluso funciona correctamente? no es una referencia de clase o identificación, Tal vez me perdí algo. Nunca he visto eso hecho en estilos de CSS – Jakub

+1

Encontré la solución, ahora debes probarla. :) Lee mi respuesta. :) –

Respuesta

8

La solución para esto es establecer min-ancho en el cuerpo:

body{ width:100%;min-width: 1002px; } 

Esto soluciona un problema en todos los navegadores que tengo, así como iphone (de acuerdo con iphonetester aunque me doy cuenta que es probable que sea mejor añadir algunas preguntas de los medios ahora realmente para dar la mejor solución para los usuarios de mano

+0

:) Incluí eso en mi respuesta actualizada :) También cubre otra método, Ambos funcionan, y tiene varios consejos y tricls. –

+1

respuesta legendaria, ¡gracias! ¿Alguien sabe por qué es "1002px" sin embargo? –

+0

@Webbo, acabo de usar esa cifra porque funcionó con mi pantalla :) YMMV – stephenmurdoch