Search code examples
htmlcssnavdivide

.png as background images on navigation bar

I am very new to HTML and CSS and this is not a project, but rather I am discovering things on my own. I am trying to create a navigation bar using lists (ul, li) and wanted to put a search icon and user log in icon along with the other text on the nav bar. This is my HTML:

<div class="nav">
    <ul>
        <div class="navBarIcons">
            <li class="searchIco"><a href="">search</a></li>
            <li class="userIco"><a href="">user</a></li>
        </div>
        <li><a href="">OVERCLOCKING</a></li>
        <li><a href="">PERIPHERALS</a></li>
        <li><a href="">STORAGE</a></li>
        <li><a href="">POWER SUPPLY</a></li>
        <li><a href="">GRAPHIC CARDS</a></li>
        <li><a href="">MEMORY</a></li>
        <li><a href="">MOTHERBOARDS</a></li>
        <li><a href="index.html">PROCESSOR</a></li>
    </ul>
</div>

and this is my CSS:

.userIco {    
    background-image: url(userIco.png);    
    background-repeat: no-repeat;    
    background-size: 25px;    
    background-position: center;    
}

.searchIco {    
    background-image: url(searchIco.png);    
    background-repeat: no-repeat;    
    background-size: 25px;    
    background-position: center;    
}

.nav li a:hover {    
    background-color: #195ca1;         
    color: #f2f2f2;         
}

What I would want to do is to hover on the icons and it would still be there (as you can see in the screen cap it disappears when I hover)

Screencap

if I remove the text it wont be properly aligned and when I hover it doesn't cover the whole block of the background

enter image description here

Solution

  • Your background-image is set into the <li> element, but your background-color is set to your <a>, so it is being on an upper layer than the <li>. You should set the background-color to li:hover instead, or perhaps move your background-image to the <a> element. The image needs to be on the same or higher layer than the background-color.