Imagen de fondo cortó más allá de la ventana gráfica

Question

dirección URL del sitio rebelde: http://chrism.se

Después lo ponemos en vivo que descubrió que si la ventana es demasiado pequeña para el contenido, con el fin de requerir el desplazamiento, la imagen de fondo (cuerpo- tag, repeat-x) no se extenderá más allá de la vista inicial, pero no puedo, por la vida de mí, descubrir por qué y cómo solucionarlo. Una nota a tener en cuenta es que no codifiqué el sitio yo solo, ya que no soy tan experto en Javascript y los diseñadores querían algunos efectos swooshy. Mi colega mayor seguramente podría encontrar un remedio, pero desafortunadamente está lejos y me gustaría terminar con esto.

El estado de html y css es el mismo que cuando me enteré del problema, pero he intentado con sugerencias que he visto en preguntas similares, principalmente en torno al ancho mínimo. Realmente no entiendo la diferencia entre background is only as wide as viewport? y mi problema?

vista completa = i.imgur.com/6aDpN.jpg

Problema = i.imgur.com/X6JVp.jpg

Answer 1

Lo más parecido a una solución de trabajo que pude encontrar fue a partir de #bodyCurrent, #bodyNext:

• Eliminar right: 0.
• Agregar min-width: 1349px.

Mirando de nuevo, quizás eso es suficiente.

probado solo en Firefox, utilizando Firebug.

Answer 2

Esto, unido al fondo de div#wrapper:

background:url("../img/home.png") repeat-x scroll 0 0 #1B2E4C; 

Answer 3

IE no soporta min-width para que pueda utilizar una expresión para hacer lo mismo:

body { 
    /* fix for most browsers, fill in desired width */ 
    min-width: 1000; 

    /* IE Version, fill in desired width equal to the min-width, second value with 2px less */ 
    width:expression(document.body.clientWidth < 1000 ? "998px" : "auto"); 
} 

Answer 4

Soy consciente de que soy manera tarde a la fiesta, pero me encontré con el mismo problema y ha añadido una min-width para el cuerpo para solucionar este problema. Como el enlace que proporcionó todavía tiene este problema, supongo que es posible que desee obtener más información. El ancho mínimo del cuerpo debe ser al menos tan ancho como la ventana gráfica cuando aparecen las barras de desplazamiento horizontales.

Es más fácil ver qué sucede si su ventana gráfica es lo suficientemente pequeña para las barras de desplazamiento y utiliza la vista 3D de Firefox para ver la página. Luego verá que su región-pie de página está configurada para tomar el 100% del ancho del elemento del cuerpo y que el fondo funciona bien; sin embargo, el cuerpo en sí es más pequeño que el desbordamiento de la parte superior de la página, de modo que obtienes ese área de aspecto de corte cuando te desplazas. Así que haz que el elemento del cuerpo tenga un ancho mínimo tan grande como el desbordamiento de la parte superior de la página y estarás listo. Este es un problema bastante común (incluso lo noté en mailchimp por un tiempo).

Answer 5

Probado en IE7:

html, body { 
    position:relative; 
    overflow:hidden; 
    margin:0 auto !important; 
}