Trong trang của tôi có 2-3 phần có chiều rộng và nền 100%. Khi tôi mở nó trên toàn màn hình tất cả mọi thứ là ok nhưng khi màn hình nhỏ hơn 960px (chiều rộng của nội dung trong phần này) hình nền không phải là toàn bộ trang. Rượu whisky bên phải được giấu trong khoảnh khắc firtst không có nền - màu trắng. Bạn có thể thấy ý tôi ở đây: http://micobg.net/10th/CSS: 100% chiều rộng và nền?
Sử dụng chiều rộng tối thiểu nền: 960px; thay vì chiều rộng: 100%; Chúc mừng
Chỉ cần thêm kiểu background-size:100% vào phần tử bạn đã áp dụng background-image. Hoạt động trong Firefox, Safari và Opera. Ví dụ:
<style>
.divWithBgImage {
width: 100%;
height: 600px;
background-image: url(image.jpg);
background-repeat: no-repeat;
background-size: 100%; //propotional resize
/*
background-size: 100% 100%; //stretch resize
*/
}
</style>
<div class="divWithBgImage">
some contents
</div>
Bây giờ nó cũng hoạt động trong Chrome – Channel
Về this bài viết, bạn nên sử dụng cover cũng như:
html {
background: url(PATH_TO_IMAGE) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
đọc: http://www.whatstyle.net/articles/48/css_tricks_1_100_percent_width_in_a_variable_width_container – diEcho
Bạn có thể tìm thông tin hữu ích trong [stackoverflow.com/questions/2083831/css-background-image-does-not-fill-when-scrolling](http://stackoverflow.com/questions/2083831/css-background-image-does- not-fill-when-scrolling) – utsikko