Img Swap with CSS won't work

Question

Here is my code. HTML:

<div id="socmed">

<div id="icons"> 
    <div id="fb"></div>
</div>
</div>

CSS:

#socmed {
height: 100px;
padding-top: 70px;
padding-bottom: 50px;
background-color:rgba(247, 34, 34, 0.7);
width: 100%;
}

#icons {
width: 300px;
height: 75px;
margin: 0px auto;
}

#fb {
height: .89in;
width: .89in;
background-image:url("../images/facebook_dark.png");
}
#fb:hover {
height: .89in;
width: .89in;
background-image:url("../images/facebook_active.png");

Currently, neither logo shows up in my "socmed" div. Anyone know what I'm doing wrong? Stumped.

The path to the images are relative to the CSS: http://stackoverflow.com/questions/940451/using-relative-url-in-css-file-what-location-is-it-relative-to — Mr. Polywhirl, Dec 21 '13 at 03:51
so currently my directory looks like this. style.css>>>CSS>>>index.html>>>IMAGES>>>facebook_active.png — Nishant Joshi, Dec 21 '13 at 03:58

score 0 · Answer 1 · answered Dec 21 '13 at 04:56

check the following steps:

1.Image contains folder path (inspect the path) 2.If image size is big it won't appear full image.so it will appear partial image according the mentioned dimension.for that problem use background-size property

Take a look :DEMO

Img Swap with CSS won't work

1 Answers1