How to add an image as its own background image attribute? - php

Question

In Wordpress, I wanted to duplicate the images of the posts, so I can set one of them as background, and then blur it, creating a nice effect, without having to change all my html structure.
How can I do that, if possible, with PHP? I tried long time ago to achieve with JQuery, but at that time I didn't manage to make it:
$(".post-cover").each(function(){
var img = $(this).find("img");
$(this).css({
"background-image": "url('"+img.prop("src")+"')",
//Any other CSS background propriety
//If your div don't have a fixed width and height
width: img.width(),
height: img.height()
});
img.remove();
});
If I used Jquery, where should I implement it?
My structure is
<div class="post-cover">
<img src="#"/>
</div>
and the final result should be something like:

Answer 1

For this to work you need to set the img source as the background of the container div and blur it. However, as this will blur all child elements, you will need to move the original img element outside of the .post-cover and position it absolutely so that it is still sharp. Try this:
$(".post-cover").each(function() {
var $cover = $(this);
var $img = $cover.find("img");
$cover.css({
backgroundImage: "url('" + $img.prop("src") + "')",
width: $img.width(),
height: $img.height()
});
$img.insertAfter(this).css({
position: 'absolute',
top: $cover.offset().top,
left: $cover.offset().left
})
});
.post-cover {
-webkit-filter: blur(10px);
filter: blur(15px);
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post-cover">
<img src="https://i.imgur.com/mE2HyxV.jpg" />
</div>

Answer 2

Could be like this:
$( document ).ready(function() {
$('.post-cover img').each(function() {
$(this).before('<img src="'+ $(this).attr('src')+'" class="blur">');
});
});
.post-cover {
position: relative;
}
.post-cover img {
width: 250px;
height: auto;
display: block;
position: relative;
padding: 50px;
}
.post-cover img.blur {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-filter: blur(25px);
filter: blur(25px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post-cover">
<img src="https://placeimg.com/640/480/arch">
</div>