網(wǎng)站設(shè)計中，背景圖片的使用是極為重要的一部分。很多設(shè)計師為了實現(xiàn)背景圖滿屏的效果，采用了CSS的background-size屬性來實現(xiàn)。

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

在這個例子中，我們首先在body元素中添加了背景圖片url鏈接的屬性，然后指定不重復(fù)，并“固定不動”（fixed）。接著，我們使用瀏覽器特有的屬性-webkit、-moz和-o來適配不同的瀏覽器。最后，我們使用background-size:cover來讓背景圖能夠完美適應(yīng)瀏覽器窗口。

當(dāng)然，還有其他的一些背景圖片實現(xiàn)思路，例如使用fixed或absolute定位方式或使用CSS3的background-clip屬性等。但是利用background-size屬性一定是最簡單易行的方式，同時實現(xiàn)效果也非常不錯。

除了使用CSS，我們還可以通過JavaScript來實現(xiàn)背景圖滿屏效果。例如下面這個實現(xiàn)：

function resizeBackground() {
var background_image = 'url(images/bg.jpg)';
var $background_wrapper = $('.wrapper');
$background_wrapper.css({'background-image': background_image});
var background_width = $background_wrapper.width();
var background_height = $background_wrapper.height();
var window_width = $(window).width();
var window_height = $(window).height();
var window_ratio = window_width / window_height;
var background_ratio = background_width / background_height;
if (window_ratio >background_ratio) {
$background_wrapper.css({
'background-size': 'auto ' + window_height + 'px'
});
} else {
$background_wrapper.css({
'background-size': window_width + 'px auto'
});
}
}

此處的wrapper是指要進(jìn)行全屏背景的DOM元素。

無論使用CSS還是JavaScript，只要掌握了原理，都可以快速實現(xiàn)背景圖片的滿屏效果。