Medios consultas e imágenes de fondo

Question

tengo un div

<div id="page"> 

</div> 

Con el siguiente CSS:

#page { 
    background: url('images/white-zigzag.png') repeat-x; 
    } 

    @media (max-width: 600px) { 
    #page {  
    background: url('images/white-zigzag-mobile.png') repeat-x; 
    } 
} 

noto cuando cambio el tamaño de mi navegador, veo el fondo "móvil" (bueno) pero si vuelvo y amplío mi navegador, mi fondo anterior "grande" no siempre reaparece.

Es un problema intermitente pero ocurre con la suficiente frecuencia como para pensar que debería abordarlo.

¿Hay alguna forma de evitar este problema de "imagen de fondo que no aparece" o una manera de cambiar el tamaño de las imágenes de fondo para que la consulta de medios "encoja" la imagen de fondo para que se ajuste al nuevo tamaño? Por lo que yo sé no hay manera (generalizada) para cambiar el tamaño de una imagen de fondo ...

Answer 1

Según this test:

Si desea única la versión de escritorio de la imagen que desee descargar en el escritorio ...

y única la imagen móvil a descargarse en el móvil dispositivo -

Es necesario utilizar una declaración min-width para especificar un ancho mínimos de navegador imagen del escritorio de ...

y a max-width para la imagen móvil.

lo que el código sería:

@media (min-width: 601px) { 
    #page { 
    background: url('images/white-zigzag.png') repeat-x; 
    } 
} 

@media (max-width: 600px) { 
    #page {  
    background: url('images/white-zigzag-mobile.png') repeat-x; 
    } 
} 

Answer 2

El código que ya ha proporcionado es libre de errores, que es probablemente un buen lugar para comenzar actualmente tiene

#page { 
background: url('images/white-zigzag.png') repeat-x; 
} 

@media (max-width: 600px) { 
background: url('images/white-zigzag-mobile.png') repeat-x; 
} 

La parte de consulta de medios no está completa. Todavía es necesario para proporcionar el selector CSS que se utiliza fuera de la consulta:

#page { 
background: url('images/white-zigzag.png') repeat-x; 
} 

@media (max-width: 600px) { 
    #page {  
    background: url('images/white-zigzag-mobile.png') repeat-x; 
    } 
} 

empezar con eso y quiero saber si se ha solucionado cosas.

Answer 3

favor utilice

`@media screen and (min-width: 320px) and (max-width:580px) { 
#page{ 
background: url('images/white-zigzag.png') repeat-x;}}`