【问题标题】：wordpress Background image is not responsive in mobile deviceswordpress 背景图像在移动设备中没有响应
【发布时间】：2018-07-06 02:58:07
【问题描述】：
我的网站是 (https://www.yahoonewsz.com)，我已经在服务器的 public_html 文件夹中上传了一张图片。
我使用以下代码作为背景
#main {
background-image: url("image908.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
在 WordPress 的高级 CSS 部分中。
为什么图像在移动设备中没有响应？
谢谢。
【问题讨论】：
标签：
wordpress
background-position
background-repeat
【解决方案1】：
您正在使用background-size: cover which according to the background-size docs "在不拉伸图像的情况下尽可能大地缩放图像。如果图像的比例与元素不同，则会垂直或水平裁剪它，以便没有空白空间留下来。”
这意味着它可以缩放到最小的“非挤压”尺寸，以防止容器中出现任何空白空间。由于您的网站（即#main）在移动设备上的高度大致为3000px，因此背景图片将被缩放到~3000px 高。
如果要将其限制为最大宽度，请使用background-size: contain，它“在不裁剪或拉伸图像的情况下尽可能大地缩放图像”。这意味着它将始终充满容器而不会被切断。请注意，这将根据您的background-position 设置在图像下方（或上方）为您提供空白。