Code Chèn Background Image Phủ Scale Full Màn Hình

Bm_VQT

Cách đây 8 năm trước

Đối với css khi ta background cho tag body nếu ảnh nhỏ quá thì ta có thể cho nó repeat để phủ các chỗ thừa còn lại...việc này có thể làm mất thẩm mỹ cho website của bạn.
Có 1 thủ thuật giúp bạn k cần repeat và tự động co giản scale theo tùy kích thước của trình duyệt độ phân giải khác nhau và cả khi ta thay đổi kích thước trình duyệt thì trang web vẫn đảm bảo ảnh nền phủ đầy và đủ.
Demo:

http://jsbin.com/icicas/1/

Code Chèn Background Image Phủ Scale Full Màn Hình

Tải ảnh gốc

Cách làm:Ta tạo 1 tag div rồi có nội dung như sau:
PHP Code:

<?php

<div id="bg"><img width="100%" height="100%" src="link ảnh nền" /></div>  

?>

và tiếp theo CSS cho tag div 1 chút nữa là xong.
PHP Code

<?php

div#bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;}  

?>

Vậy là xong..thủ thuật này khá đơn giản phải không.Có thể giải thích nôm na cho bạn hiểu như sau:
Đối với tag DIV này ta position:fixed; kết hợp với width,height=100% ;top,left=0; thì DIV này phủ full màn hình web bạn...
và nội dung của tag DIV là chèn tấm ảnh IMG vào nó cũng sẽ có kích thước full màn hình theo tag DIV....thế là tấm ảnh vô tình trở thành hình nền
Và 1 điểm k thể thiếu là giá trị z-index:-1 rất quan trọng nó làm tag DIV này chìm xuống dưới so với các tag khác có trong website ... vậy nó trở thành giống như tag body thứ 2 trên web bạn rồi.
Good luck !
Nguồn :svphuyen

Chia sẻ bài viết ???

- Chia sẻ: