fbpx

Add a background image to the header of the app

Add a background image to the header of the app

Did you ever want to add a background image to your header menu, like this:

 

Or like this:

  1. Just create a background image in 640x128px.
  2. host this image on the Internet
  3. add the link to your image in this CSS snippet:

    ion-header-bar.bar-custom.bar.bar-header.disable-user-behavior {
    background-image: url(http://link-to-image);
    background-color: transparent;
    background-size: 100%;
    }

    (Replace “http://link-to-image” by your own link)
  4. add this snippet to your app in the “ADVANCED CUSTOMIZATION” section of the Colors menu and save:

 

 

You’re done!

And feel free to download some images here:

Done!

 

Leave a Reply

Your email address will not be published. Required fields are marked *

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