Juice Juice - 1 month ago 5
CSS Question

use css to insert background image in navbar link with

For some reason the image won't appear in the navbar, if I add borders to the css or any styling it appears but not the image. If I add the image explicitly in the html using the tag it appears but the hover over won't work..

CSS

<style>
nav{
background-color: #FFFFFF;
height:35px;
text-align:center;
border-top:1px solid #464140;
border-bottom:1px solid #464140;
padding-top:3px;
}

.img1{
border-radius:4px;
width:100%;
height:100%;
background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR_a-PcgaUqYBJgn0JywzAQot-30Hl4tyODvxTj4F91pTbWE7fZ');
}

.img1:hover{
border-radius:4px;
background-image:url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTbV-LxTpyrvTdSdHF5ulyzUJoe12f6nQr8Gn3hM3TjUfZNiEc');
}
</style>


HTML

<body>
<nav>
<a href = "index.html" class = "img1" title = "HOME"> </a>
</nav>
</body>

Answer

DEMO:

http://plnkr.co/edit/UGuTJdmvDMCgLSmJ5PfZ?p=preview

For multiple images menu:

http://plnkr.co/edit/IFuiYBVcGkERgMSOfsZO?p=preview

Add display:block property to the anchor tag. Anchor tags are inline elements by default and thus have no width and height.

 nav{
    background-color: #FFFFFF;
    height:35px;
    text-align:center;
    border-top:1px solid #464140;
    border-bottom:1px solid #464140;
    padding-top:3px;
}

.img1{
    border-radius:4px;
    width:100%;
    height:100%;
    background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR_a-PcgaUqYBJgn0JywzAQot-30Hl4tyODvxTj4F91pTbWE7fZ');
    display: block;
 }

 .img1:hover{
    border-radius:4px;
    background-image:url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTbV-LxTpyrvTdSdHF5ulyzUJoe12f6nQr8Gn3hM3TjUfZNiEc');
 }





<!-- begin snippet: js hide: false console: true babel: false -->
 <nav> 
     <a  href = "index.html" class = "img1" title = "HOME"> </a> 
 </nav>

Comments