HTML自定义背景色无法覆盖全页面问题（Thymeleaf+Bootstrap）

该样式异常和Thymeleaf模板引擎无关，是CSS规则编写错误导致，核心问题有两点：

• 为绑定了背景样式的<body>标签设置了固定高度height: 400px，直接将body高度锁死为400像素，页面内容超出该高度的区域自然无法被背景覆盖
• 为渐变背景层设置了background-repeat: no-repeat，同时未对html、body元素设置匹配视口/内容高度的基础规则，背景无法自动延伸覆盖全部内容区域

另外存在一处不符合HTML规范的细节：<style>标签写在了</head>闭合标签外侧，虽然多数浏览器可以兼容解析，但建议移入head标签内部。

将原有样式代码替换为如下内容即可，其他布局相似的页面套用相同规则即可解决同类异常：

/* 初始化html、body基础属性，清除默认边距，保证高度基准正确 */
html, body {
  margin: 0;
  min-height: 100%;
}
.navbar {
  background-color: black;
}
#multi-color-bg {
  min-height: 100vh; /* 最小高度和视口高度一致，内容不足一屏时也能铺满全屏 */
  background-image: url(firefox.png),
      url(bubbles.png),
      linear-gradient(to right, rgb(132, 208, 191), rgb(153, 132, 208));
  /* 仅对装饰图片设置不重复，渐变层允许重复延伸铺满内容 */
  background-repeat: no-repeat,
      no-repeat,
      repeat;
  background-position: bottom right,
      left,
      right;
  /* 可选：如果需要背景固定不随页面滚动，可以打开下面这行注释 */
  /* background-attachment: fixed; */
}

内容的提问来源于stack exchange，提问作者spock's-neurons