marker image with constant height and width of container - html

Question

I have got a menu list:
<ul>
<li class="marked">First item</li>
<li>Second much longer than first item</li>
</ul>
I would like to have an image marker on top of item.marked which width will be 100% of text width. The image must stretch so it will be completely visible. Height is constant.
Can this be done with CSS and IE compatibility?

Answer 1

<style type="text/css">
.selected {
background:url("example.png") no-repeat 0 100%;
}
</style>

Answer 2

Solutions for changing background of list item (can be adapted to change an image):
1. CSS-only, persistent, works for current versions of browsers (doesn't work for IE8 and older) - DEMO.
HTML:
<ul>
<li>
<input type="radio" name="s" id="o1" checked>
<label for="o1">First item</label>
</li>
<li>
<input type="radio" name="s" id="o2">
<label for="o2">Second much longer than first item</label>
</li>
</ul>
Relevant CSS:
ul input[type=radio] {
display: none;
}
input[type=radio]:checked + label {
background: lightblue;
}
If you want to have an image (with img tag) above the selected items, then you can adapt it like in this demo.
HTML:
<ul>
<li>
<input type="radio" name="s" id="o1" checked>
<label for="o1">First item
<img src="http://upload.wikimedia.org/wikipedia/commons/5/5b/Supernumerary_rainbow_03_contrast.jpg">
</label>
</li>
<li>
<input type="radio" name="s" id="o2">
<label for="o2">Second much longer than first item
<img src="http://upload.wikimedia.org/wikipedia/commons/5/5b/Supernumerary_rainbow_03_contrast.jpg">
</label>
</li>
</ul>
And add the following CSS:
label img {
top: 0;
width: 100%;
height: 100%;
display: none;
position: absolute;
}
input[type=radio]:checked + label img {
display: block;
}
If you don't want to do it with an img tag, then you can use a background-image on a pseudo-element and set the background-size to 100% 100%, like in this demo. The HTML is the same as in the first demo and you need to also have this in the CSS:
label {
position: relative;
}
input[type=radio]:checked + label:after {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
background: url(http://upload.wikimedia.org/wikipedia/commons/5/5b/Supernumerary_rainbow_03_contrast.jpg);
background-size: 100% 100%;
content: '';
}
2. CSS-only, not persistent (list item does not stay selected when you click somewhere else on the page), works for IE8 (and also IE7, but you have to hover off the text to see the change) - DEMO.
HTML:
<ul>
<li>First item</li>
<li>Second much longer than first item</li>
</ul>
Relevant CSS:
a:active, a:focus {
outline: none;
background: lightblue;
}