使用javascript设置伪元素背景图像

我正在使用选择器前面的

进行div。我设置了这个div的背景并添加了CSS模糊过滤器。我需要使用javascript动态更改这个伪元素的背景图像。当我手动为背景指定位置时，效果很好，我成功地通过将样式附加到head标记来动态设置图像，但图像不会调整大小。我需要将图像拉伸到视口的全宽，但它仅以其原始大小显示。这是我的CSS和javascript

CSS:

.content wrapper:：before{
位置：固定；
z指数：-1；
显示：块；
宽度：100%；
身高：100%；
/*背景：url（/landing/images/profile.jpg）*/
背景尺寸：封面；
-webkit过滤器：模糊（25px）亮度（.7）；
-moz过滤器：模糊（25px）亮度（.7）；
-o-过滤器：模糊（25px）亮度（.7）；
-ms过滤器：模糊（25px）亮度（.7）；
滤镜：模糊（25px）亮度（.7）；
}

Javascript:

 $('head').append('<style>.content-wrapper::before{background:url('+response.data.url+') no-repeat}</style>');

$（'head'）.append（'.content wrapper:：before{background:url（'+response.data.url+'））no repeat}）；

这就是现在的结果：


更新：解决方案

亚历克斯在评论部分的小提琴链接很有魅力。我不得不将
位置：fixed
和
background
更改为
位置：absolute
和
background image
这似乎很相似，看看：@Cherniv我尝试过这个解决方案。当我在样式表中手动给出它时仍然有效，但当我从JavaScript设置它时就不起作用了。根据我的经验，位置：在现代浏览器中，固定psuedo元素的行为非常有缺陷。不管是哪种方式，当我把位置改为绝对时，我做了这个小提琴，似乎一切都正常：可能是因为你使用了
背景
速记属性（而不是
背景图像
），所以
背景尺寸
变得过大了吗？@AlexZ感谢你的小提琴。成功了。我必须使用
位置：绝对
和
背景图像
，而且效果很好。