Setting a background image for ion-tabs

Question

I'm trying to set a background image for my tab-bar or nav-bar. I'm able to set it for a single tab icon but not for the bar itself.

index.html (the only tag inside body):

<ion-nav-view></ion-nav-view>

tabs.html:

<div>
<ion-tabs class="tabs-icon-top tabs-top tabs-back" ng-class="{'tabs-item-hide': hideTabs}" ng-controller="TabsController as Tabs">
    <ion-tab title="Back" class="tabs-color" icon="ion-arrow-left-a"  on-select="Tabs.tabSelect('back')" hidden={{!Tabs.tabShow('back')}}>
        <ion-nav-view name="tab-back"></ion-nav-view>
    </ion-tab>
    <ion-tab title="Play" class="tabs-color tabs-back" icon="ion-ios-game-controller-b" on-select="Tabs.tabSelect('play')" hidden={{!Tabs.tabShow('play')}}>
        <ion-nav-view name="tab-play"></ion-nav-view>
    </ion-tab>
    <ion-tab title="Game"  href="#/tabs/game" hidden='true'>
        <ion-nav-view name="tab-game"></ion-nav-view>
    </ion-tab>
    <ion-tab title="Share" class="tabs-color"  icon="ion-ios-camera" href="#/tabs/share" on-select="Tabs.tabSelect('share')" hidden={{!Tabs.tabShow('share')}}>
        <ion-nav-view name="tab-share"></ion-nav-view>
    </ion-tab>
    <ion-tab title="Achievements" class="tabs-color"  icon="ion-trophy"  on-select="Tabs.tabSelect('achievements')" hidden={{!Tabs.tabShow('achievements')}}>
        <ion-nav-view name="tab-achievements"></ion-nav-view>
    </ion-tab>
    <ion-tab title="Settings" class="tabs-color"  icon="ion-ios-settings-strong" href="#/tabs/settings" on-select="Tabs.tabSelect('settings')" hidden={{!Tabs.tabShow('settings')}}>
        <ion-nav-view name="tab-settings"></ion-nav-view>
    </ion-tab>
    <ion-tab title="Login" icon="ion-log-in" href="#/tabs/login" hidden={{!Tabs.tabShow('login')}}>
        <ion-nav-view name="tab-login"></ion-nav-view>
    </ion-tab>
    <ion-tab title="Score" class="tabs-color"  href="#/tabs/score" icon="ion-ribbon-a" on-select="Tabs.tabSelect('score')" hidden={{!Tabs.tabShow('score')}}>
        <ion-nav-view name="tab-score"></ion-nav-view>
    </ion-tab>
    <ion-tab title="Time" class="tabs-color" href="#/tabs/achievements-time" icon="ion-ios-timer" on-select="Tabs.tabSelect('achievements-time')" hidden={{!Tabs.tabShow('achievements-time')}}>
        <ion-nav-view name="tab-achievements-time"></ion-nav-view>
    </ion-tab>
    <ion-tab title="Moves" class="tabs-color" href="#/tabs/achievements-moves" icon="ion-ios-speedometer" on-select="Tabs.tabSelect('achievements-moves')" hidden={{!Tabs.tabShow('achievements-moves')}}>
        <ion-nav-view name="tab-achievements-moves"></ion-nav-view>
    </ion-tab>
    <ion-tab title="Likes" class="tabs-color" href="#/tabs/achievements-likes" icon="ion-thumbsup" on-select="Tabs.tabSelect('achievements-likes')" hidden={{!Tabs.tabShow('achievements-likes')}}>
        <ion-nav-view name="tab-achievements-likes"></ion-nav-view>
    </ion-tab>
    <ion-tab title="Tutorial"  href="#/tabs/tutorial" hidden='true' hide-tabs>
        <ion-nav-view name="tab-tutorial"></ion-nav-view>
    </ion-tab>
    <ion-tab title="Message"  href="#/tabs/message" hidden='true' hide-tabs>
        <ion-nav-view name="tab-message"></ion-nav-view>
    </ion-tab>
</ion-tabs>
</div>

css:

.tabs-back { background-image: url("../img/background4.jpg") !important; background-size: cover; }

Now tabs-back css works for ion-tab (play) but not for ion-tabs. I was thinking I should probably set this class to the nav-bar but I don't think I have one... I believe I'm doing something fundamentally wrong but I'm a beginner so no idea what to do.

Please help, Thanks

after further manually changing classes under 'inspect element' I have found out that removing 'tabs' from the fist 'div' class and adding 'tabs-back' the background image appears. So I guess I need to override ionic's 'tabs' css declaration. If you think I'm correct where could I edit that?

<div class="tab-nav tabs">
    <ion-tab class="tabs-color" icon="ion-arrow-left-a" on-select="Tabs.tabSelect('back')" hidden="true"></ion-tab>
    <ion-tab class="tabs-color tabs-back" icon="ion-ios-game-controller-b" on-select="Tabs.tabSelect('play')" hidden="false"></ion-tab>
    <ion-tab href="#/tabs/game" hidden="true"></ion-tab>
    <ion-tab class="tabs-color" icon="ion-ios-camera" href="#/tabs/share" on-select="Tabs.tabSelect('share')" hidden="false"></ion-tab>

Answer 1

If you are using ion-tabs directive then the class name is not the class name for the tab bar. Instead you will have to use that class name to refer to the tab bar

.tabs-back  .tab-nav{

    background-color: transparent  !important;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
    background-image: url("../img/background4.jpg") !important; background-size: cover; 
 }