Changing background image on rollover with CSS

Question

I am trying to make my div change its background on rollover, but I would like to avoid using JavaScript.

Here is my code:

<style type="text/css">

 .rollover a {     
        display : block;
        width : 200px;
        height : 200px;             
        background-image : url( image1 ); 
    }

    .rollover a:hover { 
        display : block;
        width : 200px;
        height : 200px;
        background-image : url( image2 ); 
    }

</style>

<div class="rollover"> 
    <a href="/site">sitelink</a> 
</div>

It works fine but the image is cropped.

I need to show the full image in size 200px, 200px.

Answer 1

Use background-size and also always a good idea to use background-repeat too

background-size: 100% 100%;
background-repeat: no-repeat;

Answer 2

This example work fine for me but problem is when i want to use another one rollover image. Problem is with positioning second rollover image. I tried change display : block; to inline-block but it did not help.

 .rollover1 a {     
            display : block;
            width : 200px;
            height : 200px;             
            background-image : url( image1 ); 
            background-size: 100% 100%;
            background-repeat: no-repeat;
            margin-left: 150px;           
            margin-top: 100px; 
        }
     .rollover1 a:hover { 
        display : block;
        width : 200px;
        height : 200px;
        background-image : url( image2 ); 
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-left: 150px;          
        margin-top: 100px; 
    }

Edit: I got it. I forgot define position:absolute;