css - 如何创建媒体查询以将背景图像更改为不同的背景图像？

Question

该网站是 falboretirement.com。但是，您需要通过链接http://falboretirement.com?bypass=jks访问它，因为有一个“即将推出”页面会阻止访问。对于桌面版来说，快乐退休的商人跳云的英雄背景图就是我想要的形象。但是，在较小的屏幕上，我想用纯蓝色代替。我已将 blue.gif 上传到网站以供使用。
这是我正在使用的商业 wordpress 主题，我注意到主题 CSS 包含

.vc_custom_1565817449198 {
  background-image: url(https://falboretirement.com/wp-content/uploads/iStock-638087592_1920X600-60-2.jpg?id=1443) !important;
}  

这是为大屏幕设置正确背景图像的代码。我想知道主题作者的使用!important是否阻止我能够覆盖背景图像以将其设置为纯蓝色？
我尝试使用一个非常具体的选择器，希望能够覆盖，但它不起作用......这是我尝试过的代码

@media screen and (min-width: 320px) and (max-width:1024px)  {
  div#freedom-retire.vc_row.wpb_row.vc_row-fluid.businessman.vc_custom_1565817449198.vc_row-has-fill.vc_row-no-padding.vc_row-o-full-height.vc_row-o-columns-middle.vc_row-flex {
    background-image: url (https://falboretirement.com/wp-content/uploads/blue.gif) !important; background-repeat: repeat !important;
  }
}

我也试过：

@media screen and (min-width: 320px) and (max-width:1024px)  {
  div#freedom-retire.vc_custom_1565817449198 {
    background-image: url (https://falboretirement.com/wp-content/uploads/blue.gif) !important; background-repeat: repeat !important;
  }
} 

我验证了 blue.gif 在指定的文件夹中，但我没有成功。

标签： css

Answer 1

我希望您可以通过删除 URL 和括号之间的空格来解决此问题。