Ionic 4: Background image for the whole page including footer and header and tabs

Ionic Framework
1

Hi, I want to set a background image for the entire page but I can’t imagine how to achieve it.

This is what I get:

header-footer-tab-no-background
header-footer-tab-no-background.PNG377×669 128 KB

this page’s html source:

<ion-header>
  <ion-toolbar>
    <ion-title>Info. de la aplicación</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="bg-image no-scroll">

  <ion-card >
    <!-- <ion-img src="/assets/myImg.png"></ion-img> -->
    <ion-card-header>
        <ion-card-title text-center>{{name}}</ion-card-title>
        <ion-card-subtitle text-center>Version {{version}}</ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
        <p>The content for this card</p>
    </ion-card-content>
</ion-card>
<ion-card>
  <ion-item>
    <!-- <ion-icon name="pin" slot="start"></ion-icon> -->
    <ion-label>Licencias</ion-label>
    <ion-button fill="solid" slot="end" (click)="openViewLicenses()">Ver</ion-button>
  </ion-item>
  <ion-item>
    <!-- <ion-icon name="pin" slot="start"></ion-icon> -->
    <ion-label>Renuncia de Responsabilidad</ion-label>
    <ion-button fill="solid" slot="end" (click)="openViewDisclaimer()">Ver</ion-button>
  </ion-item>
  <ion-card-content>
    This is content, without any paragraph or header tags,
    within an ion-card-content element.
  </ion-card-content>
</ion-card>

</ion-content>

And this is page’s scss variables file:

 .bg-image {
   background: url('../../assets/background.jpg') no-repeat center center fixed;
   background-size: cover;
 }
 .no-scroll .scroll-content {
   overflow: hidden;
 }

Any help?

2

you could try setting the translucent property on the ion-header to true, then add the fullscreen directive to the ion-content you want to be shown to the edges

<ion-header translucent="true" no-border>
    <ion-toolbar>
        <ion-title></ion-title>
    </ion-toolbar>
</ion-header>

<ion-content fullscreen="true">
    <!-- Content here  -->
</ion-content>

im not sure if this is possible to achieve with the tabs, or that you would necessarily want to for readability

hope this was helpful!

3

Hi, I tried the translucent option. It didn’t work. However I found this entry that solved my question:

Thanks so much!

1 Like
4

did this work for the the background appearing behind the tabs as well?

5

Yes!!

backgroung-fill
backgroung-fill.png398×733 132 KB

1 Like
6

im trying to replicate that tutorial, but my tabs are not becoming transparent. how exactly did you acheive that part? my tabs are still default #fff

7

Hi jjdev!

It’s curious. I was preparing a clean example to show you. However, I’ve just find out that the behaviour its different whether cordova platform its installed or not.

From the template:

ionic start bgexample tabs --type=angular
ionic cordova platform add android
ionic cordova platform add ios

# to test
ionic serve -l

tabs.page.scss:

ion-content {
    --background: url('../../assets/images/bg.jpg') no-repeat center center fixed cover;
    --background-size: cover;
  }
  
  ion-item {
   --background: transparent;
   --ion-color-base: transparent !important;
  }
  

  ion-tabs {
   --background: url('../../assets/images/bg.jpg') no-repeat center center fixed cover;
   --background-size: cover;
  
  }
  ion-tab-bar {
   --background: url('../../assets/images/bg.jpg') no-repeat center center fixed cover;
   --background-size: cover;
  
  }
  .bg-image {
    background: url('../../assets/images/bg.jpg') no-repeat center center fixed;
    background-size: cover;
  }
  .no-scroll .scroll-content {
    overflow: hidden;
  }

tabs.page.html:

<ion-tabs >

  <ion-tab-bar slot="bottom" class="bg-image no-scroll">
    <ion-tab-button tab="tab1">
      <ion-icon name="flash"></ion-icon>
      <ion-label>Tab One</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="apps"></ion-icon>
      <ion-label>Tab Two</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="send"></ion-icon>
      <ion-label>Tab Three</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

tab1.page.scss:

.welcome-card ion-img {
  max-height: 35vh;
  overflow: hidden;
}
.bg-image {
  background: url('../../assets/images/bg.jpg') no-repeat center center fixed;
  background-size: cover;
}

.no-scroll .scroll-content {
  overflow: hidden;
}

ion-toolbar {
  --background: transparent;
  --ion-color-base: transparent !important;
}

ion-list {
  --background: transparent;
  --ion-color-base: transparent !important;
}

ion-card {
  --background: transparent;
  --ion-color-base: transparent !important;
}
ion-item {
  --background: transparent;
  --ion-color-base: transparent !important;
}

ion-label {
  --background: transparent;
  --ion-color-base: transparent !important;
}
ion-card-header {
  --background: transparent;
  --ion-color-base: transparent !important;
}
ion-content {
  --background: url('../../assets/images/bg.jpg') no-repeat center center fixed cover;
  --background-size: cover;
}

tab1.page.html:

<ion-header>
  <ion-toolbar class="bg-image">
    <ion-title>
      Tab One
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="bg-image no-scroll" fullscreen="true">
    <ion-card class="welcome-card">
      <ion-img src="/assets/shapes.svg"></ion-img>
      <ion-card-header>
        <ion-card-subtitle>Get Started</ion-card-subtitle>
        <ion-card-title>Welcome to Ionic</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <p>Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
      </ion-card-content>
    </ion-card>
    <ion-list class="bg-image no-scroll" lines="none"  >
      <ion-list-header>
        <ion-label>Resources</ion-label>
      </ion-list-header>
      <ion-item href="https://beta.ionicframework.com/docs/">
        <ion-icon slot="start" color="medium" name="book"></ion-icon>
        <ion-label>Ionic Documentation</ion-label>
      </ion-item>
      <ion-item href="https://beta.ionicframework.com/docs/building/scaffolding">
        <ion-icon slot="start" color="medium" name="build"></ion-icon>
        <ion-label>Scaffold Out Your App</ion-label>
      </ion-item>
      <ion-item href="https://beta.ionicframework.com/docs/layout/structure">
        <ion-icon slot="start" color="medium" name="grid"></ion-icon>
        <ion-label>Change Your App Layout</ion-label>
      </ion-item>
      <ion-item href="https://beta.ionicframework.com/docs/theming/basics">
        <ion-icon slot="start" color="medium" name="color-fill"></ion-icon>
        <ion-label>Theme Your App</ion-label>
      </ion-item>
    </ion-list>
</ion-content>

I think that could give you an idea…

8

There is clearly an issue with using full background images.
See my post here https://github.com/ionic-team/ionic/issues/16678

9

i try don’t work for me :frowning:

10

try this

ion-content.background{
    --background: url(../../assets/bdr3.jpg) no-repeat 52% center/cover;
}

by center/cover you can have full background image

1 Like
11

@prabhashi1 : Yes, It worked for me… :slight_smile:

1 Like