Why is my image getting cut-off? Css breadcrumb bar

Question

I am trying to get a small home image on my breadcrumb navigation bar. For some reason it is cutting off the bottom of my home image. Here is my nav bar with breadcrumbs:

The home image is on the left of the bottom gray bar and it is missing the bottom half.

Here is my html:

<ul class="breadcrumbs">
      <li><a href="#"></a></li>
      <li><a href="#">Games</a></li>
</ul>

Here is my css:

.breadcrumbs {
   @include grid-column(12);
   border: none;
   background-color: #D7D7D7; 
   padding: 0 0 10px;
   margin: 0 0 5px 0;
   display:block;
 }
 .breadcrumbs > li{
   display:inline;   
   padding: 0px 40px;
   height:13px;
   line-height:25px;
 }
 .breadcrumbs > li:first-child{
   background: transparent url("../images/home_image2.png") 5px 4px no-repeat;
   position: absolute;
   left: 15px;
   right: 10px;
 }

What part of my code is cutting off the home image?

Answer 1

Replace your css code as mentioned below:

.breadcrumbs > li{
   display:inline-block;   
   vertical-align: middle;
}

.breadcrumbs > li:first-child a{
   background: transparent url("../images/home_image2.png") 0 0 no-repeat;
   width: 16px;
   height: 13px;
   display: inline-block;
}

It should solve your issue. Also it will help your home icon to behave appropriately as a link for user, putting here inside 'a' tag instead 'li' tag.

---Update--- Forgot to mention, change the height / width value to your icon image, the css have the ones which I had of my icon.