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>

when you run your code open your inspect element to see what target class you need to edit/where it is being set — jbutler483
I have tried to set it manually to figure it out using inspect element but with no success. That's why I thought I'm doing something fundamentally wrong. I will add the 'inspect' to the question — NaDaViZ

Raj Sharma Raj Sharma · Accepted Answer · 2016-11-28T12:57:14

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; 
 }

Setting a background image for ion-tabs

1 Answers