6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

a:hover background image that can be FULLY seen

by Campbell24
5 replies
  • WEB DESIGN
    • |
If you look at a website like stectech.com their nav hover links are exactly what I want.

When I use this code:

a:hover {background-image:url(hoever1.png)}

The image shows up on hover, but not the FULL image. I need this rounded rectangle to show up on hover centered around the text-and show the whole image. Right now it just uses like a corner of the image to lay directly over the word "Home" but doesn't physically stretch outside of the text at all.
#ahover #background #fully #image
  • Profile picture of the author KingRoyal
    Have a look at this, hope it helps!
    CSS - CSS3 Mega Drop Down Menu | CodeCanyon
    {{ DiscussionBoard.errors[7764694].message }}
  • Profile picture of the author Campbell24
    I don't really need that. All I want is to have an rounded rectangle shape that shows up behind my text (and around it to the sides about 30 px) when I hover over it. Any background images, however, will not extend past the edges of the text.
    Signature
    FREE SEO CONSULTATION/ADVICE (from a 7-figure earner)

    I will answer your SEO questions 100% for free.

    Just ask me whatever you want!
    {{ DiscussionBoard.errors[7765154].message }}
  • Profile picture of the author David V
    If your trying to do this with 1 image, that's likely the issue unless your setting each nav link to be exactly the same size.
    The site example you gave is using an image for left edge, middle, and right edge.

    If your image is not extending past the edge of the text, your using the image in the wrong class, li, or wherever your putting it.

    In the example site menu, it seems that CSS3 would be better for such a simple flat color or even gradient, the 30px rounded corners as well.

    If you want to stick with an image, break it into 3 parts like the example site.
    Left | Middle | Right
    Just look at their source code and you'll see exactly how they did that.
    Do you have a live url where your trying to do this?
    {{ DiscussionBoard.errors[7765260].message }}
  • Profile picture of the author crescendo
    a:hover{
    display: block;
    padding: 3px 10px; / *in order to create a space of 3 px top and bottom and 10 px left and right of the text in the box*/
    background: #e5e5e5; /*add the colour you prefer or your image with repeat-x top left*/
    border-radius:35px;
    line-height:20px; /*the total height of the box*/
    }

    I hope this is what you are looking for
    {{ DiscussionBoard.errors[7828651].message }}
  • Profile picture of the author project1010
    add background repeat-x
    and display block properties.
    Thanks
    {{ DiscussionBoard.errors[7833770].message }}

Trending Topics