HTML/CSS背景图片显示异常求助：新手遇背景图Bug

直接说几个大概率能解决问题的方向：

• 先查图片路径
  新手十有八九栽在这。打开你写的background-image: url()代码，核对路径：

  • 图片和HTML放一块的话，直接写url("xxx.jpg")就行
  • 图片在images文件夹里，得写成url("images/xxx.jpg")
    不确定的话，把路径复制到浏览器地址栏敲回车，能打开图片就说明路径对，打不开就改路径。

• 检查容器有没有尺寸
  要是放背景图的容器没设宽高，又没内容撑着，容器高度是0，图片当然显示不出来。给容器加个尺寸试试：

  .bg-container {
    width: 100%;
    height: 100vh; /* 直接占满整个浏览器视口高度 */
    background-image: url("你的图片.jpg");
    background-repeat: no-repeat;
  }
  

• 补全背景相关属性
  只加no-repeat不够，搭配这俩属性能解决大部分显示异常：

  background-size: cover; /* 让图片铺满容器，还不会变形 */
  background-position: center; /* 图片居中显示 */
  

• 最后试试强制刷新
  有时候浏览器缓存了旧的错误内容，按Ctrl+F5强制刷新页面，说不定就好了。

问题截图：

内容的提问来源于stack exchange，提问作者Yokozuna