Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Adding Background Images To Ionic Framework Apps

TwitterFacebookRedditLinkedInHacker News

I started working on an app and decided it was time to step up my design game. Usually my apps suffer from looking plain or dated even though they have some insanely awesome functionality (ex: OTP Safe). However, after looking at many other apps, I came to the conclusion that an app can look more attractive just by including a logo or some other kind of branding images.

The tricky part here is, how might you add images to your Ionic Framework application and have them look good across devices with multiple screen densities? After doing some research I found that this could easily be accomplished by using background images created with CSS.

To get the fullest from my research, let’s walk through the steps in accomplishing this in a fresh Ionic project.

ionic start ImageApp blank
cd ImageApp
ionic platform add ios
ionic platform add android

Remember, if you’re not using a Mac, you cannot add and build for the iOS platform.

At this point we’re only going to be using CSS and Ionic XHTML markup.

Let’s start by picking an image to be used and a nice placement for it. In this example, I’m going to rip off the Imgur logo that I found in a Google image search and place it on a screen that will represent the sign in screen to our app. Go ahead and drop the image in our project’s www/img directory with the name logo.jpg.

To get a better idea of what we’re aiming for, our login page is going to look like this:

Ionic Imgur Login Landscape

Notice the slick placement and crispness. So how did I place that image so nicely on the screen? If we open our www/css/style.css file and add the following, we’ll get exactly that:

.login {
    background: url(../img/logo.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 80%;
    height: 246px;
    margin: auto;
    z-index: 2;
    position: relative;
}

In the above code we say that the container, which in our case will be a <div> tag, will fill 80% of the screen. By making the margin auto it will center it in the screen horizontally. The <div> will have a background image of our logo that will not repeat and will be centered vertically and horizontally in the container.

Just create a <div class="login"></div> somewhere in your code and you’ll get a nice image with consistent behavior on every device you try it on. It will also scale appropriately.

If you wanted to get more precise you could create a media query and use a different background image depending on density and screen resolution factors.

Nic Raboy

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.