设置离子背景不起作用

Question

您好，我正在尝试为我的主页设置离子背景图片，但遇到了一些问题，这是我的代码：

我的 home.page.scss:

ion-content {
    --background: url(src/assets/images/finalbackground.jpg);
    --background-repeat: no-repeat;
    --background-position: center
    --background-size: contain;
}

我的 home.page.html:

<!DOCTYPE html>
    <link rel="home.page" href="home.page.css">
    <ion-content padding class="photo"></ion-content>

图像应如下所示：

它在离子实验室中的表现：

任何帮助将不胜感激

Answer 1

home.html

<ion-content padding></ion-content>

home.scss

ion-content {
    --background: url(../../assets/image/bg4.png) 0 0/100% 100% no-repeat;
}

Answer 2

您需要后台设置 none，因为如果存在任何后台设置，它会被重置。使用这样的代码。

    ion-content{
      --background: none;
      background-image: url('');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center top;
      }

设置离子背景不起作用

Setting a background in ionic not working

html

css

ionic-framework

ionic4