Setting Image with CSS [duplicate]

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
– Vaibhav Jain, Commented Jun 10, 2014 at 6:06

rubo123 · Accepted Answer · 2014-06-10 06:16:11Z

1

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.sstatic.net/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.sstatic.net/FNFWi.jpg') no-repeat;
    background-size:contain;
}

http://jsfiddle.net/4fKR8/

answered Jun 10, 2014 at 6:16

rubo123

1866 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

menirus95 · Accepted Answer · 2014-06-10 06:23:11Z

1

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

answered Jun 10, 2014 at 6:23

menirus95

1364 bronze badges

Comments

user229044 · Accepted Answer · 2014-06-10 14:25:17Z

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, 2014 at 14:25

user229044♦

241k41 gold badges347 silver badges350 bronze badges

answered Jun 10, 2014 at 6:24

Kisspa

5844 silver badges11 bronze badges

1 Comment

user229044 Over a year ago

Stop indenting your sentences, you're making them as code

AJ101 · Accepted Answer · 2014-06-10 06:32:39Z

0

Use below code.. Works like charm...

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

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

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

answered Jun 10, 2014 at 6:32

AJ101

691 silver badge8 bronze badges

Collectives™ on Stack Overflow

Setting Image with CSS [duplicate]

4 Answers 4

Comments

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Linked

Related