HTMl制作网页时的背景图如何控制全屏

HTMl制作网页时的背景图如何控制全屏

html网页背景图片如何设置为全屏？简单几行代码，教你容器全屏不占位

首先我们先做一个基本的网页页面

接着，我们初始化样式，将代码添加在标签内

添加一个div容器，并且命名为bg-box

接着我们开始设置容器背景，bg.jpg可以替换为你的素材

.bg-box {background:url('bg.jpg');}

要想背景全屏，那么容器必须全屏,所以我们将bg-box的样式补全。

.bg-box {background:url('bg.jpg');width:100%;height:100%;position:absolute;}

来预览一下。网页背景已经全屏了

但是接下来，我们在书写样内容时，并没有内容显示，所以我们还需要，给bg-box 添加一个 z-index:-1 的属性，让其置于页面最底层。就可以了。

贴一下完整代码