CODEWITHSUNDEEP
csshtmlimagenavigationhover
c00L
c00L

Reputation: 609

CSS background-image in navigation (later hover)

I am a bit confused. I am not getting any image in my navigation, if I am using background-image in my CSS. If am doing it with HTML img tag I got an image, but if I try it with CSS I got nothing. :(

I tried it like this: https://stackoverflow.com/a/16194594/3701753

But nothing happens. I guess, there is something wrong with my CSS?!

Here is my code:

HTML:

<nav>
    <ol>
        <li class="home"><a href="home.php"></a>
        </li>
        <li><a href="Info.php">Info</a>
        </li>
        <li><a href="projects.php">Projects</a>
        </li>
        <li><a href="contact.php">Contact</a>
        </li>
    </ol>
</nav>

CSS:

/******************************************* 
            Links
*******************************************/
 a:link {
    font-family:'Iceland';
    font-style: normal;
    font-size: 30px;
    font-weight: 700;
    text-decoration: none;
    color: #666;
}
a:visited {
    color: #666;
}
a:hover {
    color: #F90;
}
a:active {
}
/******************************************* 
            Navigation
*******************************************/
 nav {
    width: 100%;
    bottom: 0;
    left:0;
    height: 60px;
    position: fixed;
    background-color: #333;
}
ol {
    list-style: none;
    text-align: center;
    height: 100%;
}
li {
    display: inline;
    margin-right: 40px;
}
li a {
}
/******************************************* 
            Class
*******************************************/
 .home {
    background: url(../pics/home_button.png);
}
/******************************************* 
            ID's
*******************************************/
 #main {
    background-color: #C90;
    width: 90%;
    height: 84%;
    margin: 5% auto;
}

Here is it in fiddle: http://jsfiddle.net/373Bc/2/ I made in icon and I would like to display it in the navigation!

Upvotes: 0

Views: 770

Answers (2)

4dgaurav
4dgaurav

Reputation: 11506

There is some other issue which I am not able to get, may be with character code, indentation, or markup etc.

Because when I TidyUp your code in jsfiddle it works. I am not sure why is this happening.

Demo

.home {
    background: url(http://explorelaromana.com/wp-content/themes/explorelaromana/images/home_icon.jpg);    
    width: 40px;
    height: 32px;
    line-height: 60px;
}

li {
    display: inline-block;
    margin-right: 40px;
}

Demo 2

Upvotes: 1

Rishabh Shah
Rishabh Shah

Reputation: 679

Update the following CSS:

.home {
 background:url (http://explorelaromana.com/wpcontent/themes/explorelaromana/images/home_icon.jpg) no-repeat;
 display: inline-block;
 height: 36px;
 width: 43px;
 vertical-align: bottom;
}

Hope this hepls. :)

Upvotes: 1

Related Questions