# Background image not working

**URL:** <https://forum.ionicframework.com/t/background-image-not-working/117589>\
**Category:** ionic-v3\
**Created:** [January 8, 2018, 1:29pm UTC](https://forum.ionicframework.com/t/background-image-not-working/117589 "2018-01-08T13:29:43Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Poseyyy](https://avatars.discourse-cdn.com/v4/letter/p/45deac/32.png) [@Poseyyy](https://forum.ionicframework.com/u/Poseyyy)\
**Post date:** [January 8, 2018, 1:29pm UTC](https://forum.ionicframework.com/t/background-image-not-working/117589/1 "2018-01-08T13:29:43Z")

</div>

Hello, I’m trying to use an image as background of my home page.  
Nothing works…  
Here’s my code :

```auto
<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Test</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="bg-image">

  <ion-list>

    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
        <ion-icon [name]="item.icon" item-left></ion-icon>
        {{item.title}}
    </button>

  </ion-list>

</ion-content>

```

And my scss :

```auto
page-home {
    bg-image{
        background-image: url('assets/img/ak3.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
}

```

My folders are in : src/pages/home  
And : src/assets/img

---

<div class="post-metadata">

**Author:** ![reinerluke97](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/reinerluke97/32/129426_2.png) [@reinerluke97](https://forum.ionicframework.com/u/reinerluke97)\
**Post date:** [January 8, 2018, 3:11pm UTC](https://forum.ionicframework.com/t/background-image-not-working/117589/2 "2018-01-08T15:11:23Z")

</div>

Maybe your image path is wrong. Try something like this:  
`background-image: url('../assets/img/ak3.png');`  
or this:  
`background-image: url('../../assets/img/ak3.png');`

Well its hard to say whats wrong because you dont provide us info where your images are stored and so on.  
Also how many Items does your list have? If there are to many and they have color as well you wont see your background. You need to be sure that your List Items have set to transparent background.

---

<div class="post-metadata">

**Author:** ![Poseyyy](https://avatars.discourse-cdn.com/v4/letter/p/45deac/32.png) [@Poseyyy](https://forum.ionicframework.com/u/Poseyyy)\
**Post date:** [January 8, 2018, 3:15pm UTC](https://forum.ionicframework.com/t/background-image-not-working/117589/3 "2018-01-08T15:15:24Z")

</div>

I’ve already tried this, and edited my post to add folders path  
I have only 5 items, a lot of space under the list… So if it was that i should have a bit of the picture under the list…

---

<div class="post-metadata">

**Author:** ![reinerluke97](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/reinerluke97/32/129426_2.png) [@reinerluke97](https://forum.ionicframework.com/u/reinerluke97)\
**Post date:** [January 8, 2018, 3:20pm UTC](https://forum.ionicframework.com/t/background-image-not-working/117589/4 "2018-01-08T15:20:04Z")

</div>

oh i see the problem.  
You want to set the background to ion-content.  
But ion-content will get overlayed with .scroll-content which on default is white or black.

So change your html to this:

```auto
<ion-content padding>
  <ion-list>
    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
        <ion-icon [name]="item.icon" item-left></ion-icon>
        {{item.title}}
    </button>
  </ion-list>
</ion-content>

```

and your css file like this:

```auto
page-home {
    .scroll-content{
        background-image: url('assets/img/ak3.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
}

```

---

<div class="post-metadata">

**Author:** ![Poseyyy](https://avatars.discourse-cdn.com/v4/letter/p/45deac/32.png) [@Poseyyy](https://forum.ionicframework.com/u/Poseyyy)\
**Post date:** [January 8, 2018, 3:25pm UTC](https://forum.ionicframework.com/t/background-image-not-working/117589/5 "2018-01-08T15:25:40Z")

</div>

Nope, I just tried this but it don’t works… I’m really lost, thanks for your help

---

<div class="post-metadata">

**Author:** ![reinerluke97](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/reinerluke97/32/129426_2.png) [@reinerluke97](https://forum.ionicframework.com/u/reinerluke97)\
**Post date:** [January 8, 2018, 3:26pm UTC](https://forum.ionicframework.com/t/background-image-not-working/117589/6 "2018-01-08T15:26:18Z")

</div>

show your home.ts file pls.

---

<div class="post-metadata">

**Author:** ![Poseyyy](https://avatars.discourse-cdn.com/v4/letter/p/45deac/32.png) [@Poseyyy](https://forum.ionicframework.com/u/Poseyyy)\
**Post date:** [January 8, 2018, 3:27pm UTC](https://forum.ionicframework.com/t/background-image-not-working/117589/7 "2018-01-08T15:27:04Z")

</div>

Here it is :

```auto
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { UrbainPage } from '../urbain/urbain';
import { RuralPage } from '../rural/rural';
import { ResearchPage } from '../research/research';
import { MoyenPage } from '../moyen/moyen';
import { PrincipePage } from '../principe/principe';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

  items: Array<{title: string, icon: string}>;

  constructor(public navCtrl: NavController) {

    this.items = [];
      this.items.push(
        {title: 'Principe de la signalisation', icon: 'ios-information-circle-outline'},
        {title: 'Moyen de la signalisation', icon: 'ios-information-circle-outline'},
        {title: 'Plan de signalisation urbain', icon: 'ios-warning-outline'},
        {title: 'Plan de signalisation rural', icon: 'ios-warning-outline'},
        {title: 'Recherche', icon: 'ios-search-outline'}
        );

    }

    itemTapped(event, item) {

      switch (item.title) 
      { 
        case'Principe de la signalisation': 
          this.navCtrl.push(PrincipePage);
          break;
        case'Moyen de la signalisation': 
          this.navCtrl.push(MoyenPage);
          break;
        case'Plan de signalisation urbain': 
          this.navCtrl.push(UrbainPage);
          break;
        case'Plan de signalisation rural':
          this.navCtrl.push(RuralPage);
          break;
        case'Recherche': 
          this.navCtrl.push(ResearchPage);
          break;
      }
        
  }
    
}

```

---

<div class="post-metadata">

**Author:** ![reinerluke97](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/reinerluke97/32/129426_2.png) [@reinerluke97](https://forum.ionicframework.com/u/reinerluke97)\
**Post date:** [January 8, 2018, 3:29pm UTC](https://forum.ionicframework.com/t/background-image-not-working/117589/8 "2018-01-08T15:29:42Z")

</div>

Ok ts file looks fine. Try this css:

```auto
page-home {
        background: no-repeat fixed center; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        background-image: url('assets/img/ak3.png');
}

```

---

<div class="post-metadata">

**Author:** ![Poseyyy](https://avatars.discourse-cdn.com/v4/letter/p/45deac/32.png) [@Poseyyy](https://forum.ionicframework.com/u/Poseyyy)\
**Post date:** [January 8, 2018, 3:31pm UTC](https://forum.ionicframework.com/t/background-image-not-working/117589/9 "2018-01-08T15:31:22Z")

</div>

It still not working…

---

<div class="post-metadata">

**Author:** ![Poseyyy](https://avatars.discourse-cdn.com/v4/letter/p/45deac/32.png) [@Poseyyy](https://forum.ionicframework.com/u/Poseyyy)\
**Post date:** [January 8, 2018, 3:35pm UTC](https://forum.ionicframework.com/t/background-image-not-working/117589/11 "2018-01-08T15:35:50Z")

</div>

Nothing too, i tried with !important too ahah  
It’s soooo strange !

---

<div class="post-metadata">

**Author:** ![Poseyyy](https://avatars.discourse-cdn.com/v4/letter/p/45deac/32.png) [@Poseyyy](https://forum.ionicframework.com/u/Poseyyy)\
**Post date:** [January 8, 2018, 3:39pm UTC](https://forum.ionicframework.com/t/background-image-not-working/117589/13 "2018-01-08T15:39:26Z")

</div>

Nope, no background image with this code… 😕

---

<div class="post-metadata">

**Author:** ![Poseyyy](https://avatars.discourse-cdn.com/v4/letter/p/45deac/32.png) [@Poseyyy](https://forum.ionicframework.com/u/Poseyyy)\
**Post date:** [January 8, 2018, 3:45pm UTC](https://forum.ionicframework.com/t/background-image-not-working/117589/15 "2018-01-08T15:45:55Z")

</div>

I tried and still nothing  
Yea it’s the first thing i checked, name, path… And my img is in 1080x1920 or something like this, i already used it in my app, but not as background

---

<div class="post-metadata">

**Author:** ![reinerluke97](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/reinerluke97/32/129426_2.png) [@reinerluke97](https://forum.ionicframework.com/u/reinerluke97)\
**Post date:** [January 8, 2018, 3:47pm UTC](https://forum.ionicframework.com/t/background-image-not-working/117589/16 "2018-01-08T15:47:34Z")

</div>

Ok last try. Edited again

---

<div class="post-metadata">

**Author:** ![Poseyyy](https://avatars.discourse-cdn.com/v4/letter/p/45deac/32.png) [@Poseyyy](https://forum.ionicframework.com/u/Poseyyy)\
**Post date:** [January 8, 2018, 3:49pm UTC](https://forum.ionicframework.com/t/background-image-not-working/117589/17 "2018-01-08T15:49:01Z")

</div>

Nothing happens too… It so boring

---

<div class="post-metadata">

**Author:** ![anna\_liebt](https://avatars.discourse-cdn.com/v4/letter/a/bc8723/32.png) [@anna\_liebt](https://forum.ionicframework.com/u/anna_liebt)\
**Post date:** [January 8, 2018, 4:16pm UTC](https://forum.ionicframework.com/t/background-image-not-working/117589/18 "2018-01-08T16:16:11Z")

</div>

Hello,

if you set background-image in .scss then this should work

```auto
page-home {
    .bg-image{
        background-image: url('../assets/img/ak3.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

```

Maybe there are two things.

First:  
Paths must be as they would became later seen from index.  
Second:  
If you would use css class then you need a dot in front of your class.

Best regards, anna-liebt

---

<div class="post-metadata">

**Author:** ![Poseyyy](https://avatars.discourse-cdn.com/v4/letter/p/45deac/32.png) [@Poseyyy](https://forum.ionicframework.com/u/Poseyyy)\
**Post date:** [January 10, 2018, 9:09am UTC](https://forum.ionicframework.com/t/background-image-not-working/117589/19 "2018-01-10T09:09:36Z")

</div>

Hello,

It works ! Thank you very much for your help !

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:56pm UTC](https://forum.ionicframework.com/t/background-image-not-working/117589/20 "2021-07-19T21:56:05Z")

</div>

Closed on July 19, 2021, 9:56pm UTC