2022-03-07 解决为body设置背景图时显示失败的问题:给HTML和body添加height:100%

CSS背景图片设置无效问题及解决方案

原创已于 2023-01-03 11:18:08 修改 · 111 阅读

CC 4.0 BY-SA版权

文章标签：

于 2022-03-07 21:55:46 首次发布

20 篇文章

订阅专栏

在CSS中为body添加背景图片时遇到设置无效的问题，原因是缺少了html元素的高度设置。通过添加html和body的高度100%解决此问题。此博客记录了一次简单的CSS样式调试过程，提醒开发者注意样式覆盖和页面布局的基本设置。

如题,在给body添加一个背景图时
用到了如下代码

body {
    background: url(./images/bg.jpg) no-repeat top center;
}

发现设置无效

 html {
     height: 100%;
 }
 
 body {
     height: 100%;
     background: url(./images/bg.jpg) no-repeat top center;
 }

因为是对照视频写的,视频里的代码

 html {
     height: 100%;
 }
 
 body {
     height: 100%;
  }

人家是写在一个单独的reset.css文件里,就导致出现了这个问题,
问题简单,但也耗费了不少时间找原因和解决,特此记录