0

I want to make one image as a background for another (it will be the same image). This is going to work only on mobile version of site. I was trying different combinations of positions and displays, but it doesn't work and this is as far as I could get:

enter image description here

This is how my Vue code looks like:

   <div class="img-big">
      <img
        v-if="productCard.file"
        :src="`${productCard.file}`"
        :alt="productCard.altText || productCard.text"
        class="blur-background-img"
      >
      <img
        v-if="productCard.file"
        :src="
          `${productCard.file}`
        "
        :alt="productCard.altText || productCard.text"
      />
    </div>

And this is scss code:

  .img-big {
    img {
      display: block;
      margin: 0px auto;
      @media only screen and (max-width: 420px) {
        z-index: 2;
        width: 70%;
        top: 0;
      }
    }
    .blur-background-img {
      z-index: 1;
      filter: blur(8px);
      margin: 0;
      width: 100%;
    }
  }

The only thing that I know works correctly is z-index, but I need to put one image (not blurred) on another (blurred, as a background)

dokichan
  • 857
  • 2
  • 11
  • 44

1 Answers1

2

Use position: relative for blurred image and position: absolute for another one so that it can be positioned relative to blurred one .

#outerCircle {
  position: relative;
  width: 42vw;
  height: 42vw;
  margin: auto;
  border-radius: 50%;
  border: 4px solid rgb(255, 62, 62);
  background-color: rgb(253, 133, 133);
  user-select: none;
}

#styleCircle {
  position: absolute;
  width: 16vw;
  height: 16vw;
  text-align: center;
  padding: 0%;
  top: 10%;
  /*Used to reposition*/
  left: 10%;
  /*Used to reposition*/
  border-radius: 50%;
  border: 3px solid black;
  background-color: rgb(255, 233, 35);
}
<div id="outerCircle">
  <div id="styleCircle"></div>
</div>
Rana
  • 2,500
  • 2
  • 7
  • 28
  • Thanks, that's what I was looking for! – dokichan Sep 16 '21 at 18:24
  • 1
    Welcome , but as told in above comment filter such as blur and opacity will be rendered in child element too , so use `box-shadow` or `rgba` `background-color` for same effect – Rana Sep 16 '21 at 18:27
  • You can also use pseudos to lay both backgrounds and avoid inheritance of opacity or filter . example https://jsfiddle.net/vuepgx8s/1/ ;) – G-Cyrillus Sep 16 '21 at 18:47