通过媒体查询基于屏幕大小的Bootstrap全宽容器背景图像恢复

Question

我正在尝试使用媒体查询为移动设备显示较小的背景图片版本。但是，原始背景图像在缩小图像后面以常规尺寸显示 这是常规形式的图像的CSS。

#signup{
background-image:linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.7)),
image-url('zoom1028.jpg');
background-position: center center; 
background-repeat: no-repeat;
background-image: fixed;
background-size: cover;
background-color: #464646;
height: 800px;
}

以下是我正在使用的css.scss文件中的引导媒体查询。

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
 #signup{ 
 background-image:linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.7)),
 image-url('zoom1028.jpg');
 background-position: center center; 
 background-repeat: no-repeat;
 background-image: fixed;
 background-size: cover;  
 }
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
#signup{ 
background-image:linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.7)),
image-url('zoom1028.jpg');
background-position: center center; 
background-repeat: no-repeat;
background-image: fixed;
background-size: cover;  
 }
}

/* Small devices (tablets, 768px and up) */
@media only screen and (min-width : 768px) {
#signup{ 
background-image:linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.7)),
image-url('zoom1028.jpg');
background-position: center center; 
background-repeat: no-repeat;
background-image: fixed;
background-size: cover;  
 }
}