IONIC4 Фоновое изображение изменяется при открытой клавиатуре

Question

Я пытаюсь установить фоновое изображение для моей страницы входа, некоторые базовые вещи. Но когда нажимается один из входов и отображается клавиатура, размер изображения изменяется (до небольшого размера)

Мое фоновое изображение находится в теге div, я попытался поместить изображение в тег ion-content, чтобы оно решало проблему с клавиатурой, но затем изображение слишком сильно увеличивалось. Я попытался использовать тег ion-view, но затем я получаю следующую ошибку

.... error: Ошибки разбора шаблона: 'ion-view' не известен элемент:

Вот мой HTML-код (хотя это некоторые базовые вещи)

<div class="bg">
<form #form="ngForm" (ngSubmit)="login(form)">

</form>

<ion-label ... ></ion-label> 
</div>

Вот мой класс bg:

.bg{
padding-bottom: 0 !important;
background-image: url('../../assets/lock.png') !important;
height: 100% !important;
width: 100% !important;
background-repeat: no-repeat;
background-image: cover !important;
background-size: cover !important;
background-position: center; 
background-attachment: fixed;}

Answer 1

Попробуйте это

ion-content { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  background-size: cover;
} 

Answer 2

Я попробовал это, и в конце концов это сработало, слава богу, я изменил некоторые атрибуты в моем классе bg, вот изменения

.bg{
padding-bottom: 0 !important;
background-image: url('../../assets/lock.png') !important;
height: 100% auto !important;
// width: 100% !important;
background-repeat: no-repeat;
background-image: cover !important;
background-size: cover !important;
background-position: center;
position: fixed ;}

Answer 3

Я думаю, что вам нужно нацелиться на тег ion-content.

Оглядываясь назад на проект, который я сделал, у которого был градиентный фон, я использовал это:

@mixin linearGradient($top, $bottom){
  background: $top; /* Old browsers */
  background: -moz-linear-gradient(top,  $top 0%, $bottom 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  $top 0%,$bottom 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  $top 0%,$bottom 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  $top 0%,$bottom 100%); /* IE10+ */
  background: linear-gradient(to bottom,  $top 0%,$bottom 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

ion-content {
  @include linearGradient($brand-beer, $brand-darkbeer);
}

И не сделалне замечать каких-либо проблем с отображением.Так что вы, вероятно, можете просто поместить свой фрагмент bg в строку ion-content sass, например:

ion-content {
    padding-bottom: 0 !important;
    background-image: url('../../assets/lock.png') !important;
    height: 100% !important;
    width: 100% !important;
    background-repeat: no-repeat;
    background-image: cover !important;
    background-size: cover !important;
    background-position: center; 
    background-attachment: fixed;
}

Я не уверен, откуда вы взяли ion-view.Быстрый поиск кажется, что это не было в Ionic начиная с v1.Он претерпел некоторые значительные изменения по сравнению с версиями, поэтому вы всегда должны убедиться, что помощь, которую вы читаете, относится к той версии Ionic, с которой вы работаете, иначе вы застрянете еще больше.