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

前端OnTheRun

已于 2023-01-03 11:18:08 修改

阅读量95

点赞数

CC 4.0 BY-SA版权

分类专栏： bug&error 文章标签： html javascript background css css3

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

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/123341027

20 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如题,在给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文件里,就导致出现了这个问题,
问题简单,但也耗费了不少时间找原因和解决,特此记录