CSS solucionó un problema de fondo repetido

StackOverflow https://stackoverflow.com/questions/432784

  •  10-07-2019
  •  | 
  •  

Pregunta

Estoy diseñando un sitio con un fondo fijo repetido pero no puedo entender por qué tiene un problema.

Si carga el sitio en una ventana pequeña, luego desplácese hacia la derecha, el fondo no continuará y el color de fondo se mostrará en su lugar.

¿Alguna idea?

El sitio es: http://new.focalpix.co.uk/

CSS para el fondo es: 

body {
    background: url(http://media.focalpix.co.uk/img/gradbackground.png) repeat-x fixed;
}
¿Fue útil?

Solución

Pruebe el siguiente CSS: 

body, html {
    color:#fff;
background: #000 url(http://media.focalpix.co.uk/img/gradbackground.png) fixed repeat-x;
    text-align:center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans serif;
}

body {
    font-size: 70%;
}

Parece que (tanto en Opera como en Chrome) el navegador está tratando el área fuera de la vista inicial del navegador como parte de la etiqueta HTML pero no como parte del CUERPO. Puede verificar esto colocando la imagen de fondo en el HTML pero no en la etiqueta BODY, y luego vea cómo aparece solo en el área de desplazamiento para ver del documento. No tengo idea de por qué sucede esto, ¿alguien?

CSS arriba parece solucionar el problema, sin embargo.

Otros consejos

ha definido el fondo del cuerpo: url en style.css línea 13, pero también ha definido reglas para el fondo del cuerpo en la regla que comienza en la línea 17.

La regla en la línea 17 es para el cuerpo, html, pero la que comienza en la línea 11 es solo para el cuerpo. Probablemente podría condensarlos en una sola regla, definiendo exactamente lo que desea que sea el fondo: un color o una imagen de una URL

Esto se debe al hecho de que la etiqueta <body> está configurada de manera predeterminada al 100% del ancho de la ventana del navegador, no al sitio. Esto significa que cuando el ancho de la ventana es inferior a 960 px, el ancho de su sitio, termina el bloque del cuerpo. Para solucionar esto, simplemente configure: 

body {min-width: 960px}

Desafortunadamente, min-width no funciona en versiones antiguas de Internet Explorer sin un hack de JavaScript llamado minmax . Sugeriría incluir el código de inserción de JavaScript en algunos comentarios condicionales para evitar una solicitud HTTP innecesaria y posibles errores de compatibilidad en los nuevos navegadores. Así que incrusta minmax así: 

<!--[if lte IE 7]>
<script type="text/javascript" src="minmax.js"></script>  
<![endif]-->

Además, un consejo general: estos problemas son bastante fáciles de resolver jugando con firebug .

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top