Tạo background cho website với kích thước giữ nguyên -jquery

reset and begin

5/21/2011

Khi ta sử dụng zoom của trình duyệt web thì thường hình nền cũng sẽ bị thu nhỏ lại. ở đây ta sử dụng jquery để tạo ra hình nền cố định mà khi zoom kích thước nó vẫn giữ nguyên , và ảnh được đặt ở trung tâm trình duyệt, chạy tốt trên FF, chrome, ie8, opera....

hình template

khi zoom background sẽ bị lệch hay thu nhỏ cùng template .

đế giữ nguyên hình ảnh ngay cả khi sử dụng chức năng zoom của trình duyệt có 1 vài cách như sau :

C1: sử dụng css3 - 1 số ít trình duyệt hỗ trợ

html {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

C2 : dùng jquery
sử dụng css


#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

chèn ảnh nền sau tab body

<body> <img src="images/bg.jpg" id="bg" alt="">

kế đến là jquery:


<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

    <script>

        $(function() {   

        

            var theWindow        = $(window),

                $bg              = $("#bg"),

                aspectRatio      = $bg.width() / $bg.height();

                                        

            function resizeBg() {

                

                if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {

                    $bg

                        .removeClass()

                        .addClass('bgheight');

                } else {

                    $bg

                        .removeClass()

                        .addClass('bgwidth');

                }

                            

            }

                                           

            theWindow.resize(function() {

                resizeBg();

            }).trigger("resize");

        

        });

    </script>

mỗi lần thay đổi kích thước trình duyệt ta vẫn giữ được ảnh nền cố định kích thước không thay đổi
nguồn tham khảo perfect full page và full size background .