CODEWITHSUNDEEP
htmlcsshoverbackground-image
ultraloveninja
ultraloveninja

Reputation: 2139

Background image position on navigation item

Not too sure what I'm doing wrong here. I swear I've had this working in the past, but for some reason I cannot get the background image to show when you hover over the navigation item.

I've tried to add a width, but that doesn't seem to work. That only makes the hover all sorts of crazy.

Here's the current CSS:

.nav ul li {
    display: inline-block;
    margin-left: 15px;
}

.nav ul li a {
    text-decoration: none;
    color: #760706;
    display: block;
    position: relative;
}

.nav ul li a:hover {
    background: url(imgs/ornament.png) -10px 2px no-repeat;
}

But this is the current result when you hover:

enter image description here

If I increase the width of the anchor element and change it to inline-block it only increases the width of the navigation:

CSS:

.nav {
float: right;
font: 1.2rem "rosewoodfill", Georgia, "Times New Roman", Times, serif;
margin-top: 35px; 
}

.nav ul li {
display: inline-block;
margin-left: 15px; 
}

.nav ul li a {
  text-decoration: none;
  color: #760706;
  display: inline-block;
  position: relative;
  width: 150px;
}

  .nav ul li a:hover {
    background: url(imgs/ornament.png) -10px 2px no-repeat;
}

Result:

enter image description here

Not too sure if I am missing something or what.

I created a pen to help illustrate what I'm trying to do:

http://codepen.io/ultraloveninja/pen/GfAuI

Upvotes: 0

Views: 527

Answers (2)

Kieran McClung
Kieran McClung

Reputation: 724

I think the problem lies with the position of the background.

.nav ul li a:hover {
   background: url(imgs/ornament.png) -10px 2px no-repeat;
}

The -10px means the background position is -10 pixels on the x axis and is positioned 2 pixels down on the y axis. So if your image is 10px wide you won't be seeing it appear as it is being pulled to the left by 10px. If you set the code to:

.nav ul li a:hover {
   background: url(imgs/ornament.png) 0 2px no-repeat;
}

The image will appear to the very left of the anchor tag on hover, and will be placed 2px down. You can then add some padding to the left hand side of the anchor so that the text doesn't cover the image (assuming you would want this).

.nav ul li a {
   text-decoration: none;
   color: #760706;
   display: inline-block;
   padding-left: 15px;
   position: relative;
   width: 135px;
}

.nav ul li a:hover {
   background: url(imgs/ornament.png) 0 2px no-repeat;
 }

Upvotes: 1

cjc
cjc

Reputation: 751

Because you are using an inline-block element you can't have the background image extend beyond the content. However, if you use the pseudo-selector :before you can make it work like this:

.nav ul li a:before {
    content: "."; /*You have to have some sort of content for this to work.*/
    display: inline-block;
    width: 15px;
    color: #fff /*This should match your background color so that you can't see it*/
}

.nav ul li a:hover:before {
    background:url(img/url) 0 2px no-repeat;
}

That will provide the space for the image to show up. Then when you hover over the item it will show up.

You have to have content in the before for it to work. A period is small. If you then set the color to the same as the background color that it is on then you won't be able to see it.

Upvotes: 0

Related Questions