I have a question that may be a bit challenging. I'm not entirely sure if it's possible, but I feel like I remember seeing or doing something similar in the past. I am currently working on creating a horizontal menu using a div block sized 980x36px with a background image:
Within this div, I have links (<a href="/">text</a>) styled as block elements (display: block;) and floated left. The layout now looks like this:
Now, I want all active links and links that are hovered over to have a different background, like so:
The challenge here is that the hover background image is also 980x36 px and changes color from blue on the left to red on the right, just like the original background image:
When hovering over a link, I need to set the background position to a negative horizontal value to align the colors of the two backgrounds. For example, for the third link, setting background-position: -233px 0px; would achieve this.
My question is how can this be achieved automatically? Here lies the tricky part: since the links contain text and must support multiple languages, their widths are unknown. Using PNG images isn't ideal due to compatibility issues with IE6. Additionally, I prefer to avoid using JavaScript and aim for a clean, widely supported solution.
One concept that comes to mind is utilizing the background-attachment: fixed; property. If each link's background position could be fixed relative to the container div, it would solve my problem perfectly. Does anyone know of a suitable solution for this?
If not, I might have to resort to the less ideal PNG method with an IE fix. Any insights or suggestions would be greatly appreciated!