The fact is that when the foliage is the background, the image is the same, and how can I do this so that the image that is displayed is cloned onto the background with blur?

Code:

.item:before { content: ""; position: fixed; left: 0; right: 0; z-index: -1; display: block; background-image: url('https://image-cc.s3.envato.com/files/33362626/wpthumbfx_preview_590x300.jpg'); background-size:cover; background-repeat:no-repeat; background-position:center; width: 100%; height: 100%; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); }

enter image description here

enter image description here

  • Once the jQuery label is in question: probably use the jQuery method and replace background-image . - Mr. Brightside
  • Yes, but the image is not on the style itself but on before - Sauron
  • exactly not noticed. Pseudo-elements so, really, do not process. You can wrap .item in a div or span and * -filter with background to apply to the new element. Then the element can be accessed and replaced with a background - Mr. Brightside
  • It was enough to create a separate div to copy all the code from before in this way it is further simple to specify the background on the html itself. I solved the problem. Thanks for the idea I was tired ...)) - Sauron

0