Applying background-image on ion-nav-bar

ionic-v1
1

I tried to set a background-image to my ion-nav-bar:

.bar.bar-positive { //I tried every possible combination regarding ion-nav-bar class
   background-image: url("../img/title-tab-background.png") !important;
}

My ion-nav-bar declaration is:

<ion-nav-bar class="bar-stable bar-positive nav-title-slide-ios7">

I managed to apply it on the h1:

.bar.bar-positive { //I tried every possible combination regarding ion-nav-bar class
       h1 {
          background-image: url("../img/title-tab-background.png") !important;
       } 
 }

but I really want it on the whole nav-bar.

The issue is that the background-color of .bar.bar-positive defined in ionic.css seems to override my background-image.

How could I achieve this?

2

What order do your stylesheets get called in? Sounds like a CSS selector priority issue.

3

ionic first, then mine:

@import "www/lib/ionic/scss/ionic";

//my custom css here
4

Sass, ok… so if you can confirm that your styles are actually included after core styles in the generated HTML, what does your style stack look like in developer tools? What style is overriding your custom style?