css - Setting pseudo element background image using javascript -

css - Setting pseudo element background image using javascript -

i having div before selector. set background of div , added css blur filter it. need alter background image of pseudo element dynamically using javascript. when manually give location background, works fine , succeeded in setting image dynamically appending style head tag image won't resize. need image stretched total width of viewport displayed in original size only. here css , javascript

css:

class="lang-css prettyprint-override"> .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>');

this result now:

update: solution

alex's fiddle link in comments section worked charm. had alter position:fixed , background position:absolute , background-image

javascript css pseudo-element