如何根据屏幕大小更改背景图像？

Question

我使用Zurb粉底来处理我的样式，我知道有一个数据交换类可以根据屏幕尺寸更改图像，但不确定是否可以用它来改变div的背景图像？

background-image:image-url('img_home_first_bar.jpg'); 

Answer 1

您可以使用 Rahul Desai 的评论中所述的媒体查询来执行此操作。

实施例

HTML：

<div class="backgroundchange"></div>

CSS：

.backgroundchange {
    width: 100px;
    height: 100px;
    background: grey;
}
@media screen and (min-width: 1080px) {
    .backgroundchange {
        background-image: url("backing1.png");
        background: blue;
    }
}
@media screen and (min-width: 487px) and (max-width: 1079px) {
    .backgroundchange {
        background-image: url("backing2.png");
        background: green;
    }
}
@media screen and (max-width: 487px) {
    .backgroundchange {
        background-image: url("backing3.png");
        background: red;
    }
}

因此，使用这些媒体查询，您可以根据窗口大小设置CSS进行更改。

注意：让结果窗口越来越大，以查看效果。

DEMO HERE

Answer 2

试试这个，因为你的问题类似于这里讨论的问题。

<强> Background Image change with screen size