Background Image Not Working For Image

Question

I would like to make a background image for one of my images. The background image is transparent and can be seen at http://webmaster.tsaprotectandserve.com/new_design/images/view_site.png (and I'm pretty sure I have the correct url relative to the document in the code) and the idea is just that one you hover over the images, you can see the view site background image. Before I move the background image to a hover class and center it on the image, I wanted to make sure it works properly just as a background image but it isn't showing up.

My code is

<img style="float: left; margin-bottom: 20px; background-image: url(images/view_site.png)" src="images/white_house_website.PNG" width="490" height="231" alt="White House Website">

My website with the issue is here and the image with the problem can be found if you scroll all the way to the bottom. It is the white house image.

Answer 1

u can view my working solution in jsfiddle: http://jsfiddle.net/avi_sagi/Ea78j/3/

CSS Rules

.thumb{
    width:490px;
    height:231px;
    background:url('images/view_site.png') no-repeat center;
    background-size:100%;    
}
.thumb:hover .view_site{
    width:490px;
    height:231px;
    background:url('images/white_house_website.PNG') no-repeat center;
    background-size:128px 128px;
}

if your css is in external stylesheets remember to change the url of the background image or mention absolute url to be safe.

HTML

<div class="thumb">
    <div class="view_site"></div>
</div>

Answer 2

It is actually working. the image is covering up the "Veiw Site" image. Because its the background.

i removed the top image via google chrome...

What you want to do is set the "View Site" image as separate div as child of a div around the image. and set it to appear on hover. something like http://jsfiddle.net/hWcMK/

CSS:

.imagebox:hover .viewsite{
    display:block;

}

.viewsite{
    width:125px;
    height:125px;
    background-image: url("http://webmaster.tsaprotectandserve.com/new_design/images/view_site.png");
    margin-top:-150px;
    position:absolute;
    display:none;


}

and the HTML:

<div class="imagebox">
<img src="http://webmaster.tsaprotectandserve.com/new_design/images/abc_website.PNG" width="80%"/ >
    <div class="viewsite"></div>    
</div>