如何使用css爲body標籤設置背景圖片？

Question

這是我的CSS ...

body{  
    background: url(<?php echo base_url()."images/1.jpg";?>) no-repeat center 
    center fixed; 
    background-size: cover; 
    -moz-background-size: cover; 

    -webkit-background-size: cover; 

    -o-background-size: cover; 
    height: 100%; 

    position:absolute; 
    width:100%; 
} 

我想設置圖像作爲背景完全適合屏幕尺寸。現在圖像顯示爲完整背景，但圖像的某些較低部分未顯示。 那麼解決方案是什麼？

Answer 1

您可以將background-size設置爲100% 100%來代替「拉伸」圖像。

注意。 canIuse指出前綴不需要用於背景大小的屬性。

body { 
 
    background: url(http://placekitten.com/g/300/300) no-repeat center center fixed; 
 
    background-size: 100% 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    width: 100%; 
 
}