0

I'm trying to replace home link text with an image for breadcrumb trailer. Mouse cursor is still pointer but image doesn't appear. I'm using this breadcrumb trailer

How could I this working please jsfiddle

<li itemprop="itemListElement" itemscope itemtype="" class="trail-item trail-begin">
<a href="#" rel="home" itemprop="item"><span itemprop="name">Home</span></a>
<meta itemprop="position" content="1" />
</li>

CSS:

li.trail-begin {
    display: inline-block;
     font-size: 0;
     color: 000;
    height: 25px;
    position: static;
    text-align: center;
    width: 30px;
    line-height: 25px;
    margin: 0;
}
li.trail-begin a  {
    background-image: url("https://1.bp.blogspot.com/-T3iC1fWjXIM/XqVHr8gv4GI/AAAAAAAAAGE/k5EviLmoDwkttKB9sUgjVbCSTlinrOqlACLcBGAsYHQ/s1600/1-2-home-png-image-thumb.png");
    background-position:left;
    background-repeat:no-repeat;
    background-size: 25px;
}
0

Your question is much more like a CSS question. The anchor a by default is display as inline. So it doesn't have height and width unless text, image etc inside with finite dimension. To make it work, just add display:block; to the css so it expands to match the parent container.

li.trail-begin {
    display: inline-block;
     font-size: 0;
     color: 000;
    height: 25px;
    position: static;
    text-align: center;
    width: 30px;
    line-height: 25px;
    margin: 0;
}
li.trail-begin a  {
    background-image: url("https://1.bp.blogspot.com/-T3iC1fWjXIM/XqVHr8gv4GI/AAAAAAAAAGE/k5EviLmoDwkttKB9sUgjVbCSTlinrOqlACLcBGAsYHQ/s1600/1-2-home-png-image-thumb.png");
    background-position:left;
    background-repeat:no-repeat;
    background-size: 25px;
    display: block; /* <-------- */
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.