Background image not working

Ionic Framework ionic-v3
1

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

<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 :

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

2

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.

3

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…

4

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:

<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:

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

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

6

show your home.ts file pls.

7

Here it is :

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;
      }
        
  }
    
}
8

Ok ts file looks fine. Try this css:

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');
}
9

It still not working…

11

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

13

Nope, no background image with this code… :confused:

15

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

16

Ok last try. Edited again

17

Nothing happens too… It so boring

18

Hello,

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

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

1 Like
19

Hello,

It works ! Thank you very much for your help !