Zapytania o media i obrazy tła

Question

Mam div

<div id="page"> 

</div> 

z następującymi CSS:

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

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

zauważam kiedy rozmiar przeglądarkę, widzę "mobile" tła (dobre), ale jeśli wrócę i sprawię, że moja przeglądarka będzie duża, moje poprzednie "duże" tło nie zawsze pojawi się ponownie.

Jest to sporadyczny problem, ale dzieje się tak często, że uważam, że powinienem się do niego odnieść.

Czy istnieje sposób na obejście problemu z "obrazem tła nie pojawiającym się" lub zmianę rozmiaru obrazów tła, aby zapytanie o media "zmniejszyło" obraz tła, aby dopasować go do nowego rozmiaru? O ile wiem, nie ma (powszechne) sposób zmienić rozmiar obrazu tła ...

Answer 1

Według this test:

Jeśli chcesz tylko komputerowej wersji obrazek, aby pobrać na pulpicie ...

i tylko ruchomy obraz do pobrania na telefon komórkowy urządzenie -

Musisz użyć deklaracji min-width, aby określić minimalną szerokość przeglądarki dla obrazu pulpitu ...

i a max-width dla obrazu mobilnego.

Tak Twój kod będzie:

@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

Kod podałeś jest trochę buggy który jest dobrym miejscem do rozpoczęcia aktualnie masz

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

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

Fragment zapytania o media nie jest kompletny. Trzeba jeszcze zapewnić selektor CSS, który został użyty na zewnątrz zapytania:

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

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

Start z tym i daj mi znać, czy to rozwiązuje sprawy.

Answer 3

skorzystaj

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