html - 将全屏尺寸图像作为自定义元素中的背景

Question

希望这是一个快速的问题。我想在我的着陆页上添加一张图片，该图片可以缩放到任何屏幕。我发现此代码是建议的最佳方法

html {
  background: url('image/img.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

但是我在实现这个时遇到了问题。这段代码做了它应该做的事情，但是如果我将它设置在 html 下，那么这个图像就会出现在我不想在我的网站中调用 html 的任何地方。我希望这只发生在我网站的一页中。我尝试创建自己的自定义 html 标签 bodycover {}，但没有成功。

我是新手，还没有涉足自定义 html 标签。我觉得有一个简单的解决方案，但尽管进行了彻底的研究，我还是找不到它。

谢谢

编辑:如果有一种简单的方法可以使它在没有自定义元素的情况下工作，那会更好。我根本不知道有一个

Answer 1

正如@Paulie_D 所说，您不需要将此应用到 html 标签；一个标准的 div 就可以了。另外，给新元素一些宽度和高度的尺寸。稍微清理一下:

.bg {
    width: 100%;
    height: 100%;
    background: url('image/img.jpg') no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover; 
}

确保 .bg 的父元素的高度和宽度也为 100%。