在活动类css引导程序中添加背景图像

Question

I am using bootstrap tabs. I want to use a down arrow for active class on tabs.

<ul class="nav nav-tabs" style="font-size:20px;">
                  <li><a  class="active" data-toggle="tab" href="#menu1"><span class="glyphicon glyphicon-sound-dolby"></span></a></li>
                  <li><a data-toggle="tab" href="#menu2"><span class="glyphicon glyphicon-send"></span></a></li>
                  <li><a data-toggle="tab" href="#menu3"><span class="glyphicon glyphicon-earphone"></span></a></li>
                  <li><a data-toggle="tab" href="#menu4"><span class="glyphicon glyphicon-send"></span></a></li>
                </ul>

Here is css of active class.

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: #555;
    cursor: default;
    background-color: #fff;
    background: url('../image/down.png') no-repeat !important;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}

Right now its just displaying white background for active class. But not the image. Kindly help me. Thank you

Answer 1

The problem in css class. You assigned it to anappropriate selector. In html class assigned to tag, but in css to

. You need to wright correct css rule. So your code will looks like this:

 .nav-tabs>li>a.active { background: #fff url('../image/down.png') right center no-repeat ; } 

Answer 2

Alternatively you can try this--

Working snippet

  .nav li.active { cursor: default; background: url('https://www.w3schools.com/css/img_fjords.jpg') no-repeat !important; background-size: contain; border: 1px solid #ddd; border-bottom-color: transparent; } .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { background-color: transparent !important; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <ul class="nav nav-tabs" style="font-size:20px;"> <li><a class="active" data-toggle="tab" href="#menu1"><span class="glyphicon glyphicon-sound-dolby"></span></a></li> <li><a data-toggle="tab" href="#menu2"><span class="glyphicon glyphicon-send"></span></a></li> <li><a data-toggle="tab" href="#menu3"><span class="glyphicon glyphicon-earphone"></span></a></li> <li><a data-toggle="tab" href="#menu4"><span class="glyphicon glyphicon-send"></span></a></li> </ul>