Невозможно установить полное фоновое изображение на ionic card ionic 4

Question

Я пытаюсь установить Фоновое изображение Ion-карты, которая будет полностью покрывать область карты, но всякий раз, когда я добавляю фоновое изображение, оно не покрывает всю его площадь, но оно покидает угол. Мой код

   <ion-card class="design" style="width : 43%;height: 35%;">
   </ion-card>

    Scss Code
    .design  {
     background-image: url(../../assets/icon/rectangleCopy25@3x.png);
     background-size: cover;
     display: inline-block;

               }

Answer 1

Простой: Вам нужно указать свой собственный компонент, чтобы определить настройки стиля.

ion-card {
     background-image: url('assets / 35.jpg');
     background-size: cover;
     (...)
}

Вы можете столкнуться с некоторыми проблемами с фоновым изображением при вызове параметра URL. Чтобы решить эту проблему, если вам это мешает, перейдите по этой ссылке:

https://github.com/vuejs/vue-loader/issues/481

Answer 2

Это связано с тем, что по умолчанию для ионной карты установлен отступ в 10 пикселей.

Вы можете просто сделать это, переписав исходный CSS, предоставив свой собственный стиль для .card-md класса

.design  {
  background-image: url(.....);
  background-size: cover;
  display: inline-block;
}

.card-md {
  margin: 0;
}

Однако я бы порекомендовал вам вместо background-position установить center.

.design  {
  background-image: url(...);
  background-size: cover;
  background-position: center;
}

Вот демоверсия .

Answer 3

Попробуйте с этим,

#design{
            background-size: 100%;
            background-repeat: no-repeat!important;
            background-size: cover!important;
            width: 105vw!important;
            height: 100vh!important;
            margin-left: -10%!important;
            background-attachment: fixed!important;
            margin-top: -10%!important;
            background-position: center center!important;
          }

DEMO