How to properly blur the required images - html

Question

I am trying to blur just the image of the background, but it seems that the result that I am getting is blurring the whole div
My code is the following:
.profile-div {
background-image: url("http://2.bp.blogspot.com/_QtDFVR44S_Q/TTu95-aiCqI/AAAAAAAAA-k/jP65Ns2H-f0/s1600/camaleon2.jpg");
width: 100%;
height: 12em;
}
.img-profile {
height: 8em;
width: 8em;
border: 3px solid black;
margin-top: 2em;
margin-bottom: 2em;
}
<div class="profile-div scale-image img-blur">
<div class="form-group">
<input style="display: none" type="file" accept=".png,.jpg" (change)="uploadProfilePicture($event)" #fileInput />
<img *ngIf="imageURL" src="{{auxAuth.photoURL}}" class="pointer rounded-circle img-profile" (click)="fileInput.click()">
</div>
</div>
What I expected was to blur the img of the div background, but it is also blurring the inside img. How could I change that?
I show my current result:

Answer 1

Move the background image to a separate div, and wrap them both with a container:
HTML:
<div class="container-div">
<div class="profile-div scale-image img-blur"></div>
<div class="form-group">
<input style="display: none" type="file" accept=".png,.jpg" (change)="uploadProfilePicture($event)" #fileInput />
<img *ngIf="imageURL" src="{{auxAuth.photoURL}}" class="pointer rounded-circle img-profile" (click)="fileInput.click()">
</div>
</div>
CSS:
.profile-div, .container-div {
width: 100%;
height: 12em;
}
.profile-div {
//example blur
filter: blur(8px);
-webkit-filter: blur(8px);
}
.img-profile {
position: absolute;
top: 2em;
bottom: 2em;
height: 8em;
width: 8em;
border: 3px solid black;
}