The Soda Pop
23-08-2016#
admin offline * LeYTi (Sáng Lập!)
Level MAX  Like 0
Xu 0  TN 0
VnMaster

Đố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/

[CSS] Cách chèn background image phủ scale full màn hình
[Mở ảnh]


Cách làm:Ta tạo 1 tag div rồi có nội dung như sau:
<?php
<div id="bg"><img width="100%" height="100%" src="link ảnh nền" /></div>  
?>

Copy code


và tiếp theo CSS cho tag div 1 chút nữa là xong.
<?php
div
#bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;}  
?>

Copy code


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.

Nguồn: SvPhuYen.com
Online
» Có 0 thành viên đang trực tuyến.
Stats
TOP
Facebook - Thanks to XTgem™ Sitemap - Nội quy
© 2015-2017 VnMaster.Yn.Lt
-->