html 背景图铺满整个页面背景图片居中

2023-06-08 10:09| 来源: 网络整理| 查看: 265

新建一个html文件,把你的图片放在一个文件夹内

在这里插入图片描述我的图片放在了lib的文件夹里面

不平铺且放大： body{ background: url(./lib/bg.jpg) no-repeat; background-size: 100%; }

因为背景设置在主体，所以要定义为body{}。 background-image:url(图片)，这个是添加图片的意思。 no-repeat是不平铺的意思。 background-size: 100%是放大到整个页面的意思。效果在这里插入图片描述

图片随内容大小变化而变化的，页面滑动也会铺满页面大小 body{ background: url(./lib/bg.jpg) no-repeat; background-size: 100%; background-attachment: fixed; } 横向平铺 body{ background: url(./lib/bg2.jpg); background-repeat:repeat-x; }

background-repeat:repeat-x就会横向平铺效果在这里插入图片描述

纵向平铺 body{ background: url(./lib/bg2.jpg); background-repeat:repeat-y; }

background-repeat:repeat-y;这个指令是纵向平铺。

在这里插入图片描述

全屏平铺 body{ background: url(./lib/bg2.jpg); background-repeat:repeat; }

background-repeat:repeat;是全屏平铺。可以用background-size放大缩小。

效果在这里插入图片描述背景图片居中

body{ background: url(./lib/bg2.jpg); background-repeat: no-repeat; background-position: center; height: 100vh; width: 100%; }

background-position: center;就是位置居中的指令

【本文地址】

公司简介

联系我们