Knowledgebase
Apptitecture Mobile App Design Solutions > Apptitecture Mobile App Design Support > Knowledgebase

Search help:


Customising your App Heading Using CSS Code

Solution

Add a background image to the header of your Mobile app using CSS Code!

 

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

Screen Shot 2016-10-02 at 19.53.54

Or like this:

Screen Shot 2016-09-23 at 16.37.50 Screen Shot 2016-09-23 at 16.35.58 Screen Shot 2016-09-23 at 16.36.47 Screen Shot 2016-09-23 at 16.37.00

  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:

COPY AND PASTE THE CSS CODE BELOW IN THE ADVANCED CUSTOMISATION SECTION BY CLICKING ON COLORS AND THEN SCROLL DOWN TO THE BOTTOM OF THE EDITOR. ENSURE IT IS SWITCHED ON.

ion-header-bar.bar-custom.bar.bar-header.disable-user-behavior {
background-image: url(http://link-to-image);
background-color: transparent;
background-size: 100% 100%;
}
4. (Replace “http://link-to-image” by your own link)
5. Add this snippet to your app in the “ADVANCED CUSTOMIZATION” section of          the Colors menu and save:
  1. Screen Shot 2016-09-23 at 16.25.01

You’re done!

And feel free to download THESE images to have a try:

bg-leather-br bg-leather-gr

bg-retro2 bg-retro1 bg-wood-b bg-wood bg-carbon bg-denim

 
Was this article helpful? yes / no
Related articles How to use CSS Code to Customize your Audio Feature
How to Promote my Apps on my website
How to use the Advanced Customization CSS / SCSS to customise your App Features
Use CSS to add some space in – layout 18
Learn how to add internal links / in app links in your Application
Article details
Article ID: 11
Category: How to use CSS code to Customise your Mobile App Heading Section
Rating (Votes): Article not rated yet (0)

 
« Go back

 
Powered by Help Desk Software HESK, brought to you by SysAid