Background image with blur in not working in Vuetify x Ant

I'm trying to add a blurry background image in an Ant Card.

What I want to do is make the background image of a card blurry, but the problem is that the background image is not showing up.

I used the pseudo-element ::before to place the image behind the card, but it doesn’t seem to be working.

Over time, I noticed that when I add content to the ::before, I can see part of the background image. However, even when I set its position to absolute and set top, bottom, left, and right to zero(0), it still doesn’t work.

Before Adding content value

Vue.use(antd);
new Vue({
  el: '#app'
})

.my-card .ant-card-body{
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.my-card .ant-card-body::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: no-repeat url('https://cdn.vuetifyjs.com/images/parallax/material.jpg');
  background-size: cover;
  filter: blur(5px);
  z-index: -1;
}
.my-card .ant-card-body .ant-card-meta-title{
  font-family: 'Rocher', sans-serif;
  font-size: 25px;
  margin: 0;
  padding: 0;
}
.my-card .ant-card-body .ant-card-meta-description{
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 20px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ant-design-vue@1/dist/antd.min.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1/dist/antd.min.js"></script>



<div id="app">
  <a-card class="my-card" hoverable>
    <a-card-meta>
      <div slot="title">
        <span>My Title</span>
      </div>
      <div slot="description">
        <div>My description</div>
      </div>
    </a-card-meta>
  </a-card>
</div>

After adding content value

Vue.use(antd);
new Vue({
  el: '#app'
})

.my-card .ant-card-body{
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.my-card .ant-card-body::before {
  content: 'THIS IS JUST AN EXAMPLE TEXT FOR TESTING ONLY';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: no-repeat url('https://cdn.vuetifyjs.com/images/parallax/material.jpg');
  background-size: cover;
  filter: blur(5px);
  z-index: -1;
}
.my-card .ant-card-body .ant-card-meta-title{
  font-family: 'Rocher', sans-serif;
  font-size: 25px;
  margin: 0;
  padding: 0;
}
.my-card .ant-card-body .ant-card-meta-description{
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 20px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ant-design-vue@1/dist/antd.min.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1/dist/antd.min.js"></script>



<div id="app">
  <a-card class="my-card" hoverable>
    <a-card-meta>
      <div slot="title">
        <span>My Title</span>
      </div>
      <div slot="description">
        <div>My description</div>
      </div>
    </a-card-meta>
  </a-card>
</div>

As you see in the sample 2 where I add value in the content, In the style class .my-card .ant-card-body::before, I do content: 'THIS IS JUST AN EXAMPLE TEXT FOR TESTING ONLY'; That's why, some part of the background is showing.

I don't know what I'm missing here, So any idea or suggestions?

Solution

After some time checking and testing, It seems I need a set of keywords display-inside or use a display property with flow values to make the layout behave as an inline or block-level element.

I'm not sure if this is the correct approach, but I will just put it here as an answer.

Vue.use(antd);
new Vue({
  el: '#app'
})

.my-card .ant-card-body{
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.my-card .ant-card-body::before {
  display: flow; /* I just add this line */
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: no-repeat url('https://cdn.vuetifyjs.com/images/parallax/material.jpg');
  background-size: cover;
  filter: blur(5px);
  z-index: -1;
}
.my-card .ant-card-body .ant-card-meta-title{
  font-family: 'Rocher', sans-serif;
  font-size: 25px;
  margin: 0;
  padding: 0;
}
.my-card .ant-card-body .ant-card-meta-description{
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 20px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ant-design-vue@1/dist/antd.min.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1/dist/antd.min.js"></script>



<div id="app">
  <a-card class="my-card" hoverable>
    <a-card-meta>
      <div slot="title">
        <span>My Title</span>
      </div>
      <div slot="description">
        <div>My description</div>
      </div>
    </a-card-meta>
  </a-card>
</div>