从0开始html前端页面开发_CSS实现设置背景图自适应屏幕大小

只需要在css样式里对BODY元素添加css样式即可

html代码如下

<STYLE TYPE="text/css">
BODY {background-image: URL(../../ui/loading/loading_page.png);
    background-position: center; 
    background-repeat: no-repeat;
    background-attachment: fixed;
}
</STYLE>

 

元素介绍：

 

要显示的背景图URL地址！

 

background-image:

背景图的起始位置

 

background-position: bottom; 

可取以下参考属性

 

属性值	说明
top left	左上
top center	靠上居中
top right	右上
left center	靠左居中
center center	正中
right center	靠右居中
bottom left	左下
bottom center	靠下居中
bottom right	右下

设置背景图的平铺模式

 

background-repeat;

可取以下参考属性

 

no-repeat//不允许平铺

 

需要设置background-attachment属性才能确保在Firefox 和 Opera中正常显示

 

background-attachment

可取以下参考属性：

fixed

 

css代码

BODY {background-image: URL(../../ui/loading/loading_page.png);
    background-position: center; 
    background-repeat: no-repeat;
    background-attachment: fixed;
}