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.

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. (1)


Configuring your Ionic App

In updating my book, Mobile App Development with Ionic, I was exploring ways to globally set various settings for my Ionic applications. As a general rule, much of the styling of the components are meant to be done at the component level. However, you might have several ion-refresh components scattered throughout your application. Instead of defining that component’s spinner in each instance, you can set that property globally. To set these parameters, we can pass in an object of key-value pairs to the forRoot method on IonicModule. For example:

IonicModule.forRoot( {mode: 'ios', })

in the app.module.ts file.

Here are some of the settings that you might want to adjust for you Ionic 4 application:
This will set the overall platform mode of the app. It can be either ios or md.
This boolean will enable the ability to tap the device’s status bar to trigger a scroll to the top of the screen.
To set the back button icon that the ion-back-button uses, pass in the ion-icon name or path to the icon.
To set the back button text that the ion-back-button uses.
If you want to globally set the style of the ion-spinner, you can use this property. Allowable values are “lines”, “lines-small”, “dots”, “bubbles”, “circles”, “crescent”.
If you want to globally set the style of the ion-loadingController component, you can use this property. Allowable values are “lines”, “lines-small”, “dots”, “bubbles”, “circles”, “crescent”.
If your app uses the sidemenu template, you are probably using the ‘hamburger’ menu icon. If you would like to change it, pass in the ion-icon name or path to the icon.
If your app uses the ion-refresher, you can change the refreshing icon by passing in the ion-icon name or path to the icon. This is the value that the pullingIcon attribute references in the component.
If your app uses the ion-refresher, you can change the icon that is shown while the refreshing action is being done by passing in the ion-icon name or path to the icon. his is the value that the refreshingSpinner attribute references in the component.
If your app uses the ion-refresher, you can change the icon that is shown while the refreshing action is being done by passing in the ion-icon name or path to the icon. his is the value that the refreshingSpinner attribute references in the component.
If you want to globally set the style of the ion-infinite-scroll component’s spinner, you can use this property. Allowable values are “lines”, “lines-small”, “dots”, “bubbles”, “circles”, “crescent”.

There are some properties that are related to the tab bar. Since that component just underwent a late-beta change, I was not able to verify them:

  • tabbarPlacement: string;
  • tabbarLayout: string
  • tabbarHighlight: boolean

The IonicConfig list contains other parameters, but I did not explore them all.

Hope this helps you build better Ionic 4 applications.


Icons and Floating Inputs: Ionic

I was skimming the Ionic Worldwide Slack channel and saw this post:

Hi all,
i stuck on mixing an `ion-icon` with an `floating label` like in this the *Angular Material Bootstrap Inputs Demo* (

I tried this:

< ion-item>
< ion-icon slot="start" name="bulb" color="ownred">< /ion-icon>
< ion-label position="floating">name< /ion-label>
< ion-input type="text" [(ngModel)]="">< /ion-input>
< /ion-item>


But this will center the icon and not align it on bottom, like in the shown picture.

Screen Shot 2018-10-27 at 10.28.41 AM

Do you have any idea?

This got me thinking how to create this. My work machine was being updated to Mojave, so I had a few moments to play around with a solution.

The one I came up with was to break the problem into two parts. I figured that I needed to isolate the icon from the label and input set, so I turned to the ion-grid component to handle that. By using the align properties of Flexbox, I could position the elements how I needed.

In playing with the reference that was supplied, When the input received focus, the icon also changed color. To make that action happen, I add to event handlers on the input for the ionBlur and ionFocus events.

The handler for those events simply toggles a boolean. I use that variable’s state to trigger the CSS class state using [ngClass]={‘activeInputIcon’: isLabelActive}” on the ion-icon. So, when the isLabelActive is true, the activeInputIcon class is applied.

With that, we have rebuilt a sample of the combined icon and floating label input.


Now, this sample is very basic. It does not handle multiple inputs so you will need to create a solution to solve that problem. For a bigger challenge, this entire element could be wrapped into a custom component…but I will leave that up to someone else.

PWA Icons and Ionic Resources

Ionic’s support for Progressive Web Apps (PWAs) continues to improve. Currently, there is one small hiccup in the workflow, the generation of icons. When you run

$ ng add @angular/pwa

a manifest.json file is automatically generated and a set of icons added to the src/assets/icon directory. If you have been using Ionic to generate native mobile apps, then you are probably familiar with this command:

$ ionic cordova resouces

This CLI task will generate a collection of icons that need to be included. Unfortunately, it currently does not generate all the sizes that are referenced in the manifest.json file. To save a little time here is a handy table of the icons a PWA should have and the corresponding icon from Cordova.

PWA Cordova
icon-72×72.png drawable-hdpi-icon.png
icon-96×96.png drawable-xhdpi-icon.png
icon-144×144.png drawable-xxhdpi-icon.png
icon-152×152.png icon-76@2x.png
icon-192×192.png drawable-xxxhdpi-icon.png

You will need to generate three icons to have a complete. There is a 1024×102 icon available that can be downsized quickly.

Ionic Community

The Ionic team recently updated their website to highlight various aspects of the world-wide community. As part of that, they have highlighted various individuals as ‘Ionic Leaders’. I am honored and humbled to be among some great company.

Anyone who follows me knows my passion for mobile development, and in particular Ionic. I don’t recall when I discovered the Ionic Framework, but I do recall seeing that it was built atop Apache Cordova and AngularJS. I had just finished recording two video courses on PhoneGap Build and Apache Cordova but knew very little about AngularJS. As a rule, I had tended to shy away from large frameworks due to the nature of prototype development. Not long after, I saw another component library that leveraged the same base technology stack. Thus, I made the commitment to begin learning AngularJS and the Ionic Framework. I quickly saw the power that these two frameworks offered and was sold on them as my solution.

Now, after all these years playing, building, and helping, I am so convinced that I made the right decision. I am looking forward to the new edition of Mobile App Development with Ionic, as well as, recording new lessons for

To Ionic and beyond!

Using Adaptive Icons in Ionic & Cordova

Starting with the release of Android Oreo comes the need to support adaptive icons in our applications. Unfortunately, Cordova does not support this style of Icons directly yet. If you have built a Cordova application and installed it on either an Android device running Oreo or Pie, you will see your icon is shrunken within a white circle. To fix this we need to use Adaptive icons to have a proper looking app icon. I just released a lesson on will show you how to generate an adaptive icon and adjust your config.xml file so it can be used.

Essentials of Adobe XD

Want to learn how to use Adobe XD in your workflow? I will be giving an online training course through UXPA on August 1 and August 8, 2018. This workshop will first introduce you to its design tools, once we have our design in place, we will use its built-in prototyping features to create an interactive demonstration of our design. We will go further by showing how we can share our concepts with teammates, clients or even conduct user tests. Finally, the workshop will teach you how to take your project and export the content to the development team, as well as create a design spec.

Register Now

Price: Students: $70; UXPA International Members: $280; Non-members: $500

Course outline

Session 1 Session 2
  • Welcome and set up check
  • What is XD?
  • Overview of the UI
  • menus
  • tools
  • property panel
  • UI kits
  • Creating Artboards
  • Working with vectors
  • Working with text
  • Working with bitmaps
  • Understanding layers
  • Using symbols
  • Exploring the assets panel
  • Using the repeat grid
  • Working with other programs
  • Using CC libraries
  • Exercise: create a simple five screen design.
  • Prototyping
  • Creating interaction flow
  • Adjusting transitions
  • Previewing the prototype
  • Recording a walkthrough
  • Previewing on Device
  • Sharing a prototype
  • Reviewer comments
  • Manage links
  • Exporting assets
  • Creating a design spec
  • Using Zeplin with Adobe XD
  • Wrap up