移动端div背景图片不响应问题咨询（附桌面端CSS代码）

嘿，看你这个.banner-img的CSS，桌面端正常但移动端拉胯，大概率是background-position和容器尺寸的锅，咱们一步步来调整：

1. 先优化基础背景属性 #

你原来的background-position: 100%;在移动端容易让图片偏到一边，改成center center能保证不管屏幕怎么缩，图片都居中显示；另外加上background-repeat: no-repeat防止图片重复，还要给容器设个最小高度——不然容器没高度，背景图根本显示不出来呀。修改后的基础代码：

.banner-img{
  background-image: url(http://d14a6hhmw70jfk.cloudfront.net/spartans11/images/matches_banner.png?v=1523084431);
  background-size: cover;
  background-position: center center; /* 替换原来的100%，确保居中适配 */
  background-repeat: no-repeat; /* 避免图片重复平铺 */
  min-height: 200px; /* 给容器一个最小高度，保证背景图能展示 */
  width: 100%; /* 让容器宽度占满父元素 */
}

2. 用媒体查询针对不同移动端微调 #

如果某些小屏设备还是显示不对，可以给不同尺寸的移动端单独设置样式，比如缩小容器高度，或者切换背景图的显示模式：

/* 针对平板及以下的移动端（宽度≤768px） */
@media (max-width: 768px) {
  .banner-img{
    min-height: 150px; /* 适配小屏，降低容器高度 */
    /* 要是你想完整显示图片而非覆盖容器，就把下面这行注释打开替换cover */
    /* background-size: contain; */
  }
}

/* 针对手机小屏（宽度≤480px） */
@media (max-width: 480px) {
  .banner-img{
    min-height: 120px;
  }
}

3. 别忽略父容器的尺寸设置 #

有时候背景图适配差，是因为父元素没设置宽度或高度！比如.banner-img的父容器如果是块级元素，得确保它的宽度是100%；要是用了flex布局，也要保证容器能正确占满可用空间。

额外小技巧 #

如果原图片的比例和移动端屏幕差太多，不如准备一张专门的移动端背景图，通过媒体查询切换，这样适配效果会更精准：

@media (max-width: 768px) {
  .banner-img{
    background-image: url(你的移动端专用图片地址);
  }
}

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