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

Question

我有一个带before选择器的div。我设置了这个div的背景并添加了CSS模糊过滤器。我需要使用javascript动态更改此伪元素的背景图像。当我手动给出背景的位置时，它工作正常，我成功地通过将样式附加到head标签动态设置图像，但图像不会调整大小。我需要将图像拉伸到视口的整个宽度，但它仅以原始大小显示。这是我的CSS和javascript

CSS：

 .content-wrapper::before {
    position: fixed;
    z-index: -1;

    display: block;

    width: 100%;
    height: 100%;

    /* background: url(/landing/images/profile.jpg); */
    background-size: cover;

    -webkit-filter: blur(25px)brightness(.7);
       -moz-filter: blur(25px)brightness(.7);
         -o-filter: blur(25px)brightness(.7);
        -ms-filter: blur(25px)brightness(.7);
            filter: blur(25px)brightness(.7);
}

使用Javascript：

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

现在是结果：

更新：解决方案

Alex在评论部分的小提琴链接就像一个魅力。我必须将position:fixed和background更改为position:absolute和background-image