這篇文章將為大家詳細(xì)講解有關(guān)CSS+html+jquery如何實(shí)現(xiàn)拉伸背景圖片，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司自2013年創(chuàng)立以來，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元鎮(zhèn)江做網(wǎng)站,已為上家服務(wù),為鎮(zhèn)江各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

方法一：CSS方法，這個(gè)方法有個(gè)缺陷，就是要定死高度，而且不兼容IE。

    body{width:100%; height:700px; margin:0; url(p_w_picpaths /banner11.jpg) no-repeat; padding:0; background-size:100% 100%;) ;
}



    拉伸背景圖片

方法二：jquery+CSS,都兼容

    body{width:100%; height:100%; margin:0; padding:0;}



    $(function(){
        $("body").append("");
        $("#main_bg").append("");
        cover();
        $(window).resize(function(){//瀏覽器窗口變化
            cover();
        });
    });
    function cover(){
        var win_width=$(window).width();
        var win_height=$(window).height();
        $("#bigpic").attr({width:win_width,height:win_height});
    }

方法三：html+css,這是個(gè)死辦法，呵呵，但是兼容性很好。

body{width:100%; height:100%; margin:0; padding:0;}
#main_bg,#bigpic{width:100%; height:100%;}