Ионное полноэкранное фоновое изображение

Я новичок в Ionic Framework и пытаюсь запустить приложение с полноэкранным фоновым изображением, например:

enter image description here

Мне удалось удалить строку состояния, это было показано в руководстве. но как мне добавить полноэкранное изображение? Когда я добавил это в style.css, он не отреагировал:

html, body{
  background-image: black;
}

ОТВЕТЫ

Ответ 1

В вашем css попробуйте:

  .scroll-content {
    background: url(image) [add image position info here];

    [add any more properties here]

  }

Это установит фон для полной области содержимого.

Ответ 2

в

ion-view class="pane"

весь материал визуализируется... я не пробовал, но я думаю, что вы можете управлять этим с помощью

    .pane {
        background: url(image) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
    }

Ответ 3

Убедитесь, что в начале пути изображения есть "../", это укажет на правильный путь к изображению в папке ресурса, когда приложение будет создано для устройства. Использование метода панели только создало проблемы, это было лучшим решением для меня, когда изображение появлялось при подаче, но не на моем устройстве Android.

.scroll-content{
    background: url("../media/images/background.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;

}

Ответ 4

Очень похоже на ответ от Helmut, который работал с использованием "ионной службы", но дал мне белый фон, когда я нажал на Android (4.2.2 на Nexus 7 в моем случае).

Селектор класса панели корректен, если вы хотите сделать фоновое изображение в полноэкранном режиме, однако, как бы то ни было, андроид сделал фоновый белый, если я вообще установил значение фона. Используя "background-image", все правильно.

Я обнаружил, что на Android и в Chrome (в то время как веб-тестирование) работает следующее:

.pane {
    background-image: url(image); 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

Ответ 5

Так как структуры папок недавно изменились в Ionic 2 beta...

Ваше изображение должно быть похоже на путь www/img/backgrounds/lake.png, а сопроводительный CSS должен выглядеть так:

.myClassName {
    background: url(../../img/backgrounds/lake.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

Примечание: вам нужно вскакивать на 2 каталога, ../../

Ответ 6

Ionic 4 Изменить цвет фона содержания ионов

enter image description here

Здесь объясняется ссылка на источник

ion-content{
--background: url(./assets/images/bg1.jpg);
--background-repeat: no-repeat;
--background-size: cover;  
}

Ответ 7

Я использую IONIC 4, я не могу установить фоновое изображение на