title: Setting pseudo element background image using javascript
body: <p>I am having a div with <code>before</code> selector. I set the background of this div and added CSS blur filter to it. I need to change the background image of this pseudo element dynamically using javascript. When I manually give a location for the background, it works fine and I succeeded in setting the image dynamically by appending the style to the head tag but the image won't resize. I need the image to be stretched to the full width of viewport but it is displayed in its original size only. Here is my CSS and javascript</p>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code> .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);
  }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code> $('head').append('&lt;style&gt;.content-wrapper::before{background:url('+response.data.url+') no-repeat}&lt;/style&gt;');
  </code></pre>
  
  <p>This is the result now:</p>
  
  <p><img src="https://i.stack.imgur.com/3Kt8B.png" alt="The image appears in the top right but I want it to be filling the viewport"></p>
  
  <p><strong><em>Update: Solution</em></strong></p>
  
  <p>Alex's fiddle link in the comments section worked like a charm. I had to change the <code>position:fixed</code> and <code>background</code> to <code>position:absolute</code> and <code>background-image</code></p>