css background color for white text with semi-transparent background image

Question

i'll have a try on my first question.

This is a problem, I had a few times, but don't exactly know, how to solve it:

I have a semitransparent background image (eg transparent rounded corners) which also as a gradient background color. (In this example it's a button for a dropdown navigation: When you hover the button, nav-list appears.)

Here's the code:

    <div id="top-navi"><a id="top-navi-button" href="#" >Navigation</a>
     <ul>
      <li><a href='#'>bla</a></li>
      <li><a href='#'>blubb</a></li>
     </ul>
    </div>

CSS:

#top-navi {
    position: fixed;
    top: 0px;
    left: 6%;
    z-index: 1000;
}

#top-navi a#top-navi-button {
    float: left;
    width: 130px;
    height: 20px;
    padding: 5px 10px 5px 20px;
    background: url(../img/top-navi-button.png) no-repeat;
    color: #FFF;
    font-size: 120%;
    text-decoration: none;
}
#top-navi a#top-navi-button:hover, 
#top-navi a#top-navi-button:focus {
    text-decoration: underline;
}

The text on the button is white. Because i want to make the site accessible, I don't put the text on the image, but write it in html (so screenreaders can read it) and style it white. This works pretty well until here.

Now, I want to make it even more accessible, so you can use all functionality, even if images are deactivated. If I do this (eg with FF developer toolbar) the background image disappears and you can't see the white text anymore.

Now, if I give the link a background-color (in addiotion to the image) it laps over the transparent corners. I also tried to put the text in a <span> and give it a background color, but as my image has a gradient, you see the background-color of the span then.

Any ideas how to solve that? Thank you very much in advance!

Chris

Answer 1

You need an extra image for the non-transparent gradient part of the image. When you add the span to the link you can style the span to have the solid background and a fallback color.

+------------------------------------------------+
| a: Gradient and shadow                         |
| +---------------------------------------------+|
| | a > span: Solid gradient + background color ||
| +---------------------------------------------+|
+------------------------------------------------+

So, HTML:

<a id="top-navi-button" href="#"><span>Navigation</span></a>

And CSS something like:

a#top-navi-button {
  background: url(top-navi-button.png) no-repeat;
}

a#top-navi-button span {
  background: url(top-navi-solid_gradient.png) #00F;
}

Please note that if you want to create an accessible site you should also consider offering keyboard navigation . Right now you can't use the Tab key to select any of the menu items.