Span - 100% width of Parent

Question

I have the following structure within a bootstrap document -

 <div class="col-lg-6 col-sm-6>
  <ul class="stdULGrey st_tabs_ul">
       <li class="st_li_first st_li_active">
           <a href="#view_1" class="st_tab st_tab_first st_tab_active">
                <span class="icoMore icoA"></span>
                <span class="tabText">WANT TO KNOW MORE?</span></a>
       </li>
       <li>
           <a href="#view_2" class="st_tab">
                <span class="icoWhereTo icoA"></span>
                <span class="tabText">WHERE TO FIND US?</span>
           </a>
       </li>

</ul>

The span element - icoMore contains a background image - which I'd like to respond to the full width of thebootstrap parent - I have tried the following code -

    .icoMore{background:url(../img/logos%20and%20icons/Wanttoknow_Icon_Off.png) no-repeat; min-width:100%; min-height:auto; display:block; }

But it displays at zero width and height - can anyone advise a solution?

Answer 1

Add display: block to span. It should be enough.

Answer 2

You'll need to add any character into your <span>, even a space, like:

<span>&nbsp;</span>

Check this fiddle:

http://jsfiddle.net/dimaspante/5j6vt0mk/