Search code examples
htmlcssimagerollover

Changing background image on rollover with CSS

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.

Solution

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

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