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

CSS背景图设置

最新推荐文章于 2024-06-17 10:49:59 发布

原创最新推荐文章于 2024-06-17 10:49:59 发布 · 5.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#css #背景图

HTML/CSS 专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何使用CSS设置BODY元素的背景图片，包括背景图的位置、重复和平铺模式等属性设置方法。

只需要在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;
}