Search code examples
htmlcsspositioningbackground-image

CSS - positioning background image in anchor breaks layout

jsFiddle

I've got a BG Image attached to a link with the class selectedlink

The Image shows, but as I position it down, it disappears outside the link's visual parameters. It's like the href is a window to the image.

Here's the code:

CSS:

div#intnavIcons a.selectedlink { 
    color: #900404; 
    font-size:11px; 
    font-weight:bold; 
    padding:#FFF; 
    text-decoration:underline; 
    background: url("/images/nav/bg-nav-current.png") no-repeat scroll center bottom transparent;
}

HTML:

<div id="intnavIcons">
   <a class="selectedlink">This is selected</a>
   <a>This is not selected</a>
   <a>This is not selected</a>
   <a>This is not selected</a>
</div>

Can anyone see if I'm missing something in my style for keeping the image above the href?

For moving it farther down, I'm just adding background-position: 0px 10px;

Solution

  • The background image is limited to the box of the element (the specific box depends on the background-clip style). If you're trying to move it down, it will start disappearing when it hits the bottom of the box.

    You may want to try adding padding-bottom:10px.

    I also notice you have padding:#FFF, which makes no sense. Did you mean background-color?