移动设备的单独背景图像答案

【问题标题】：Separate Background Image For Mobile Devices移动设备的单独背景图像
【发布时间】：2017-07-18 22:26:30
【问题描述】：

我的网站是http://www.rosstheexplorer.com/

在手机上，背景图片太小，我不喜欢。

我正在使用插件“将背景尺寸添加到定制器”来降低背景图像的高度。在台式机上，我不希望背景占据整个页面。

我可以更改手机背景图片的尺寸或使用完全独立的图片吗？是否有可以实现此目的的插件，或者是否有一些我可以使用的 CSS 代码？

【问题讨论】：

标签： css wordpress plugins background

【解决方案1】：

您可以使用完全独立的图像，甚至可以使用媒体查询根据自己的喜好调整图像大小。例如，对于桌面，

.block {
  background-image: url('images/bg1.jpg');
  background-repeat: no-repeat;
  background-size: 500px;
}

对于移动设备（比如 iphone 6+），

@media screen and (max-width: 414px) {
  background-image: url('images/bg2.jpg');
  background-repeat: no-repeat;
  background-size: 500px;
}

或

@media screen and (max-width: 414px) {
  background-image: url('images/bg1.jpg');
  background-repeat: no-repeat;
  background-size: 100px;
}

【讨论】：

谢谢，我花了好几次才得到正确的图片网络链接。最终我使用了i1.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/…"。
我可以在哪里/在哪个文件中配置建议的更改？

【解决方案2】：

Can I change the dimensions of the background image for mobiles or have an entirely separate image? - 是的，您可以通过使用 CSS 移动媒体查询来实现这一点。您可以同时提供不同的尺寸或提供不同的图像。

要了解更多关于媒体查询的信息，请参考this

【讨论】：