Forum | Appery.io

On one of my Ionic4 pages I want a custom background JPG from the nedia manager.

I created this is the Page SCSS:

ion-content {
--background: no-repeat center/cover url('../assets/images/KM_Teekay.jpg');
}

In design time the background image is shown correctly. But as soon as I test then this error is thrown.

ERROR in ./src/app/Login/Login.scss
Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /srv/appery/tmp/577331/685821/ionic/src/app/Login/Login.scss:2:2: Can't resolve '../assets/images/KM_Teekay.jpg' in '/srv/appery/tmp/577331/685821/ionic/src/app/Login'

I can overcome the above my moving the SCC snippet into Themes->SCCS Variables but then all my pages get the image

Hello Brendan,

Could you add the custom CSS class to your page and use it in the SCSS selector there?

Resolved. If I set the page SCSS to this it works:

ion-content {
--background: no-repeat center/cover url('../../assets/images/KM_Teekay.jpg');
}

Strange that the other path of '../assets/images/KM_Teekay.jpg' showed the image at deisgn time but not when Tested

Glad to hear things are sorted out now!