Truyền thông truy vấn và hình ảnh nền

Question

Tôi có một div

<div id="page"> 

</div> 

Với css sau:

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

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

tôi nhận thấy khi tôi thay đổi kích thước trình duyệt của tôi, tôi thấy "di động" nền (tốt) nhưng nếu tôi quay trở lại và làm cho trình duyệt của tôi lớn, nền "lớn" trước đó của tôi không xuất hiện lại.

Đó là một vấn đề liên tục nhưng nó xảy ra thường xuyên đủ để tôi nghĩ rằng tôi nên giải quyết nó.

Có cách nào để giải quyết vấn đề "hình nền không xuất hiện" hay cách thay đổi kích thước hình nền, sao cho truy vấn phương tiện "thu hẹp" hình nền để vừa với kích thước mới? Theo như tôi biết không có (lan rộng) cách để thay đổi kích thước của một hình ảnh nền ...

Answer 1

Theo this test:

Nếu bạn muốn chỉ phiên bản máy tính để bàn của hình ảnh sẽ được tải xuống trên desktop ...

và chỉ hình ảnh điện thoại di động được tải về trên điện thoại di động thiết bị -

Bạn cần sử dụng tờ khai min-width để chỉ định chiều rộng trình duyệt tối thiểu cho hình ảnh trên máy tính ...

và a max-width cho hình ảnh trên thiết bị di động.

Vì vậy, mã của bạn sẽ là:

@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

Mã bạn cung cấp là một lỗi nhỏ mà có lẽ là một nơi tốt để bắt đầu hiện bạn có

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

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

Phần truy vấn phương tiện chưa hoàn tất. Bạn vẫn cần phải cung cấp bộ chọn CSS mà bạn đã sử dụng bên ngoài truy vấn:

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

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

Bắt đầu với điều đó và cho tôi biết nếu điều đó khắc phục được sự cố.

Answer 3

xin vui lòng sử dụng

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