Custom page background from media manager

Moderator: Support

brendanm@ite.co.za
Posts: 22
Joined: Mon Jul 27, 2020 12:05 pm

Custom page background from media manager

Post by brendanm@ite.co.za »

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

Serhii Kulibaba
Posts: 147
Joined: Tue Aug 27, 2013 1:47 pm

Re: Custom page background from media manager

Post by Serhii Kulibaba »

Hello Brendan,

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

brendanm@ite.co.za
Posts: 22
Joined: Mon Jul 27, 2020 12:05 pm

Re: Custom page background from media manager

Post by brendanm@ite.co.za »

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

Serhii Kulibaba
Posts: 147
Joined: Tue Aug 27, 2013 1:47 pm

Re: Custom page background from media manager

Post by Serhii Kulibaba »

Glad to hear things are sorted out now!

Post Reply