0

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:

enter image description here

Gerard
  • 15,418
  • 5
  • 30
  • 52
bellotas
  • 2,349
  • 8
  • 29
  • 60

1 Answers1

0

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;
}
Chochkov
  • 1