Change background image on hover

html css list

54,697

Solution 1

You should set the text parameters like this:

#menu ul li a:hover
{
    background-image: url(http://img.mynet.com/ha2/tayyip.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Solution 2

Set the background-repeat and background-position properties using the shorthand notation

#menu a:hover {
   background: url(images/hover.png) center center no-repeat;
}

To allow the whole image to be seen you must modify the CSS for the li tag:

#menu li {
text-decoration: none;
display: inline;
font-size: 30px;
width: 50px;
padding-left: 30px;
height: 40px;
overflow: auto; /* Added this */
}

54,697

Author by

reidjako

Updated on August 15, 2020

Comments

reidjako almost 4 years

Would the proportions of the image have anything to do with the problem?

#menu {
background: black;
width: 100%;
height: 45px;
}
#menu ul {

text-decoration: none;
list-style-type: none;

}

#menu li {
text-decoration: none;
display: inline;
font-size: 30px;
padding-left: 30px;
}
#menu a:hover {
   background-image: url(images/hover.png);

}
#menu a {
text-decoration: none;
color: white;
margin: auto
  background-repeat: bo-repeat;
  background-position: top center;
  background-size: contain;

}

On hover it repeats the images multiple times. The image is 2000 x 500 px. How can I make it so that this image is displayed behind the word in the middle and not repeat. Thank you

This is the image hover link

the html code

<div id="menu"> 
<ul>
<li><a href="index.html"> Home</a></li>
<li> <a href="#"> lalal</a></li>
</ul>
</div>

reidjako almost 11 years

This does not work as it only shows one small part of the photo :(
Kevin Bowersox almost 11 years

@ridjako Is this a within an li by any chance?
reidjako almost 11 years

Yes it is in a li. I feel as though this should be very simple but. background-size: 100%;, background-repeat and the other things that should stop it arn't so...
Kevin Bowersox almost 11 years

Its because the li is styled to have a specific height and width.
reidjako almost 11 years

This one is the closest to working but the image repeats its self along the y axis 3 times and its height is 500px with the container only being 50px high
reidjako almost 11 years

I just removed it and yet no luck
reidjako almost 11 years

still no luck I think my computer is broken.
m1k1o almost 11 years

i'd make mistake, bo-repeat to no-repeat
reidjako almost 11 years

I know I fixed that :)