css - Setting pseudo element background image using javascript -


I have a div with the before selector I set the background of this div I add the CSS Blur filter to it. By using javascript I have to change the background image of this pseudo element dynamically. When I manually assign a position to the background, it works fine and I was able to set the image dynamically by adding style to the head tag, but the size of the image will not change, I get the image full of the viewport Width should be extended, but it is only displayed in its original size. Here is my CSS and Javascript

CSS:

  .content-wrapper :: first {status: fix; Z-index: -1; Display area; Width: 100%; Height: 100%; / * Background: url (/landing/images/profile.jpg); * / Background size: Cover; Webkit-Filter: Blurred (25px) Brightness (.7); -Move-Filter: Blurred (25px) Brightness (.7); -o-filter: blurring (25px) brightness (.7); -M-filter: Blurring (25px) Brightness (.7); Filter: Blurring (25px) Brightness (.7); }  

Javascript:

  $ ('head'). Attachment ('& lt; style & gt; .content-wrapper :: before {background: url}' + Response.data.url + ') No-repeat}  

This is the result now:

image top right But I want to fill it out of the viewport

update: solution

Alex's fleet link comment I used to work like a magic in section: status: fixed and background to position: full and background-image

had to change


Comments

Popular posts from this blog

java - Can't add JTree to JPanel of a JInternalFrame -

javascript - data.match(var) not working it seems -

javascript - How can I pause a jQuery .each() loop, while waiting for user input? -