CODEWITHSUNDEEP
htmlimagecss
Nilzone-
Nilzone-

Reputation: 2786

background-size (CSS3) not working properly

#main{
position: relative;
height: 60px;   
}

#exit{
float: left;
background: url(exit.jpeg) no-repeat;
width: 230px;
height: 230px;
background-size: 60px 60px;
opacity: .5;
}


<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="wrap">

        <!-- TOP -->
        <header id="main">
            <a href="#" id="exit"></a>
            <h1>Temp</h1> 
        </header>

        <!-- MENU -->
        <nav id="menu">
            <ul>
                <li><a href="#">temp 2</a></li>
                <li><a href="#">temp 3</a></li>
                <li><a href="#">temp 4</a></li>
                <li><a href="#">temp 5</a></li>
            </ul>
        </nav>


    </div>
</body>
</html>

This works, but not the way it´s supposed to. The picture gets resized, but when i hover over it, I can also move the mouse over where the picture was before it was resized, and the hover-function still gets called.

Upvotes: 0

Views: 136

Answers (1)

Spudley
Spudley

Reputation: 168715

background size affects the size of the background (oddly enough), but not the size of the actual element.

If the element has hover function on it, then that hover function will still apply across the whole element, regardless of how you've displayed the background image.

If you want the hover effect to only apply over the area covered by the background image, then you will need to resize the whole element to that size, not just the background image.

Upvotes: 1

Related Questions