Setting Image with CSS

Question

I have a menu containing Home & Self Help. When any Link is active the color is blue else grey. When hover to any link the color becomes silver.

<ul id="menu">
<li><a href="#"class="c_active">Home</a></li>
<li><a href="#">Self Help</a></li>
</ul>

Here is the fiddle Link : Demo Link

I have two images for the home. One is for Active condition and another is for Hover condition. I want to insert the Home Icon-A replacing the Home text when Link is active.

Home Icon-A

and want to insert the Home Icon-B when I hover the Link.

enter image description here

I tried with the content css property but not successfully able to insert the image.

Thanks for the help.

@KingKing: Yes.But can you please provide me the correct way to insert the icon. — Vaibhav Jain, Jun 10 '14 at 06:06

score 1 · Accepted Answer · answered Jun 10 '14 at 06:16

It would be best to do this using the 'before' and 'after' pseudo selectors.

I have added the following css to your fiddle;

#menu li {
    position:relative;
}
#menu li:first-child a:before {
    position:absolute;
    content:"";
    background:url('https://i.stack.imgur.com/h9tDF.jpg') no-repeat;
    width:20px;
    height:20px;
    background-size:contain;
    top: 9px;
    left: 14px;
}
#menu li:first-child a:hover:before {
    background:url('https://i.stack.imgur.com/FNFWi.jpg') no-repeat;
    background-size:contain;
}

http://jsfiddle.net/4fKR8/

score 1 · Answer 2 · answered Jun 10 '14 at 06:23

If you don't want the 'Home' text to appear in the navigation menu, then you need to remove the text from html.

Size your div according your image size, or you may resize the image according to your usage. You need to use background-image: url('Your link to image'); property of css to apply an image as background to any div.

I modified your code by applying the above mentioned chages. Here is the JsFiddle link

score 1 · Answer 3 · edited Jun 10 '14 at 14:25

1

Use background-position

#menu li a{
   padding: 20px 10px;
   text-decoration: none;
   display: inline-block;
   width: 60px;
    height: 50px;
   background: url(http://3.bp.blogspot.com/_167-sL7Cczk/TBiMz6jdtYI/AAAAAAAABcs/JxqC2vCIFa4/s1600/cute-puppy-dog-wallpapers.jpg);
   background-repeat: no-repeat;
   background-size: 600px 221px;
   white-space:nowrap;
    border:1px solid red;
 }

http://jsfiddle.net/kisspa/cYW7K/

edited Jun 10 '14 at 14:25

user229044

232,980
40
330
338

answered Jun 10 '14 at 06:24

Kisspa

584
4
11

Stop indenting your sentences, you're making them as code – user229044 Jun 10 '14 at 14:25

score 0 · Answer 4 · answered Jun 10 '14 at 06:32

Use below code.. Works like charm...

<style>
    .home-img{
        width:210px;
        height:210px;
        background:url('https://i.stack.imgur.com/h9tDF.jpg') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    }

    .home-img:hover{
        width:210px;
        height:210px;
        background:url('https://i.stack.imgur.com/FNFWi.jpg') no-repeat scroll 0 0 rgba(0, 0, 0, 0);     
    }
</style>

<a href="#"><div class="home-img"></div></a>

Setting Image with CSS

4 Answers4