Adding Background Images To Ionic Framework Apps

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.

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:

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 is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • Tiago Winehouse

    Nic great work, everything I need for my app and also to college meeting in your BLOG .. Congratulations!

    • I’m glad you’ve found my post useful :-). Good luck on your meeting!

  • David Castro

    Thanks for the clear and concise article; just what I was looking for!

    Is there a “best” pixel dimensions for background images that work across all (or at least most) devices? 1280×1024? 1600×1200? And is there some % or pixel count that you should pad your image with for side or top/bottom cutoff in some devices?

    • You probably want to expand upon the CSS if you want pixel perfect images by adding media queries essentially using a different size image for different size screens.

  • Anil Kumar

    Hi Nic,
    Thanks for the above post It is good, the background image is working perfectly.
    But I have some doubts to clear it
    1.It is not possible to create a theme for the whole app?
    2.Margin tag is working perfectly, but the height and width of the image will vary from device to device, It is not possible to adjust it automatically
    3.when we add a background image for the app, The colour of the background image should differ to foreground page.
    For Example: The above background image is in black colour and we attach this background image to the login form so it is unable to see the login form

    Regards
    Anil Kumar

    • In regards to your questions:

      This tutorial is for images in your application, not theming which is an extremely large task.
      You can use media queries and more advance CSS techniques if you want to take a step higher on device consistency.
      I am not sure what you mean

      Regards,

  • sunder

    need to add myapp gallery image as a mobile background. Is there any solution for this?

    • I’m not sure what you mean. Can you explain with examples?

  • Troy McKnight

    Nic – I tried the above code, and got the image to center horizontally, but it doesn’t seem to want to cooperate with resizing to the entire screen. Any ideas?

    • Care to share your code in a Gist?

      • Nadeem W. Khoury

        can you please send me how you fix your issue ??

  • Arulmozhi

    Hi Nic Raboy, Its wonderful blog where simple and clear but i got some error (Not allowed to load local resource:) like this can you help me to solve this.

    • I need more information.

      Are you testing on Android or iOS? Do you have the Whitelist Plugin installed and configured correctly? What do your actual device logs say?

      Regards,

  • Karthikeya Mishra
    • Sorry I don’t follow links to questions. If you want my help you’re going to need to ask me the question in the comments.

      Regards,

  • Karthikeya Mishra

    What I want is to use the splash screen of different screen density and when the first screen appears after the splash screen, I want an identical image in background like the splash screen . As in ionic, splash screen of 6 different screen density will be used. But doing this on all devices of all screen size is creating a problem. As I am using media query based on screen density to solve my problem but still I am not getting the desirable result of identical image.

    • I’m thinking this would be very difficult to do, given the diverse nature of all the Android and iOS devices.

      My recommendation would be to not try to match the splash image to the view image. Or maybe remove the splash screen and create your own artificial splash screen view giving you better control.

      Best,

      • Karthikeya Mishra

        One question out of this blog. Sorry for this but can you please tell me whether your oauth plugin for login via facebook and google account works in iOS or not.

        • Off topic questions should be directed at my Twitter

  • Sudhir Raj

    Hi I need to display an image as logo to my login page. I just tried to display it and I am not able to display the image correctly, there are some distractions happening to the image and the image looses its originality. I have one more issue also since it is an mobile app how to make that image display at the center and that should impact to all the types of mobile( the size of mobile screen may vary). I am pending in this for a launch guide me out.

    • What resolution of image are you trying to use? Is it a PNG?

      • Sudhir Raj

        yes it is a png and i tried all type of resolution but it supports onlyspecific mobile size not all type…….

      • Sudhir Raj

        Can we use bootstrap in ionic developement if so how to use it or install it

        • You could, but my guess is you’d end up with an awful app. Bootstrap is meant for websites, not mobile apps. It will look far from native with Bootstrap.

  • pratu jaini

    this code is not working.. where to add

    in code and in which file(css or index.html???)

    plz give whole program from start to add background image in ionic app.I am Not able to display the Image. I am beginner in ionic and I dont know how to do it.. I installed ionic framework..but unable to do more things

    • Sorry I don’t distribute project source with my free content. If you’re new to Ionic I suggest you check out my beginner level course:

      https://www.thepolyglotdeveloper.com/courses/

      It will put you on the right path.

      Regards,

      • pratu jaini

        okay thank u so much sir @nic Raboy.. I want to ask u one thing.
        can we develope ionic mobile app in ecllipse(ubuntu)?? is it okay?
        plz guide me 🙂

        Regards,

  • Gyowanny Queiroz

    The image URL should be ‘img/logo.jpg’ without the ‘../’ or it won’t show up in the mobile devices. Check this thread: https://github.com/driftyco/ionic-view-issues/issues/54