Unable to load background image

I’m new to ionic and i’m trying to load a background image, no luck.
Please advise.

home.page.scss file:

page-home {
background-image: url(’/assets/img/index.jpg’);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
.no-scroll .scroll-content {
overflow: hidden;



Worked for me!

background:url(assets/img/image.png) no-repeat center;

Thanks, but it still did not fix my problem :frowning:

How’s your implementation for page-home and bg-image classes in html?

This is my home.page.scss:
page-home {
background: url(‘assets/img/index.jpg’) no-repeat center;
background-size: cover;

This is my html code (screenshot attached):html%20code

  1. You shouldn’t add classes to ion-content like that, try something like this instead:
    <div class="bg-image">The Garden Church</div>
  1. Do remove the classes you are not implementing, like the no-scroll and padding
    padding should be implemented like: <ion-content class="..." padding>
  2. If page-home is not a parent to bg-image class, you should remove it too

Can you please send screen sort of your working directory.
it may be go to wrong working flow…

i will help of my best… :slight_smile:

Thanks, removed those classes as suggested, but i get a error while page loading

Here is the working directory

Do you have anything in your app.component.html?

No, nothing yet, only empty

Hello Shyam…
sorry for late update…

just try this…

<ion-content  padding id="fade-content" style="--background: url('../../assets/green-bg-img.jpg');">
    <ion-label>Nature, in the broadest sense.... </ion-label>