Background Images for Ionic 4

A common UI design that is applied to many mobile applications is to have an image serve as the background. This is a question that I see asked multiple times on the Ionic Forums, so I thought I would take a moment and outline the best approach to achieving this effect.

If you only need to attach your image to a specific page, just go to that page’s .scss file and define the –background variable. Here, I will set the image to reference a bg.jpg file I have in my assets directory, as well as set the parameters of how it should be rendered.

ion-content {
  --background: url(../../assets/bg.jpg) no-repeat center/cover fixed;
}

Note, the path to the asset is relative to the page’s directory.

But what if you wanted that image to be used across all of the pages? You could then move the code to the global.scss file. Since this is now being applied a global level, we need to adjust the url path:

ion-content {
  --background: url(/assets/bg.jpg) no-repeat center/cover fixed;
}

This initially will work, but watch closely when we transition from screen to screen. The background image will either shift or blank out for a moment.

ezgif.com-video-to-gif

This is due to the fact that the ion-content component that we have targeted with our CSS, is being destroyed when we navigate from screen to screen. To solve this we need to remember that Ionic at its heart is still just the web. So rather than focus on Ionic’s web components, we can think about what other HTML elements we might be able to use.

The answer is to have the body tag be the element that we attach our image to. So, in the global.scss file we can add:

body {
  background: url(/assets/bg.jpg) no-repeat center/cover fixed;
}

However, if you just made that change, you will find that the image no longer is visible. This is because the default values for ion-content are being applied. Meaning, the fill color is now being used, thus covering our image. To solve this, we need to override that with:

ion-content {
  --background: none;
}

And now we will have a nice static background for the application.

ezgif.com-video-to-gif (1)

Advertisements

One comment

  1. Thanks for this information

    what if I want to add an image for one page using body tag to define the image size and to cover ion-toolbar and ion-content ?

    Here is my code, but it doesn’t work for some reason

    mypage.page.scss:

    ion-toolbar {
    –background: transparent;
    color: #ffffff;
    }
    ion-content {
    –background: none;
    }
    body {
    background: url(/assets/dashboard_background.png) no-repeat top/cover fixed;
    background-size: 100% 50%;
    background-color: #f1f3f5;
    }

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.