OK I didnt want to overwhelm, but here is the process behind my ADDITIONAL improvements, as well some extra suggestions.
1) in order to be able to use text-indent the element must be BLOCK LEVEL. By default anchor tags (A) are inline. When you floated the A you were able to use text-indent ( because floated elements BECOME block-level). Of course you dont need to float something JUST so that it becomes block level.. you can declare it directly using display:block. this has a couple of added advantages I'll get to next.
2) a block level element is, by default, the width of it's parent. So with A as a block you don't need to declare it width concurrently with its container anymore.
3) Speaking of which, UNLESS otherwise declared, containers will expand to... well.. contain their descendant elements(padding.. and in most cases margins, tho one has to be careful with margin collapse) so by declaring the height in of the anchor tag ( we can do that when the A tag is displayed as a block and not floated) the container div (.stripes) will expand to match)
ASIDE: When you DO float an element it is taken out of the normal flow.. so the parent element thinks its not even there. So you end up having to do something to clear or contain it some how ( Such as, floating the parent also, or declaring a height.. but that seem convoluted compared to the THOUGHT process I am outlining)
4) now that everything is naturally matching, we really needed the two images ( which is why I got rid of the other background declaration) the rest of the process becomes.. ahem.. transparent. UGH.. sorry couldn't resist.
In short, you could have achieved what you asked by simply incorporating "hiding then appearing" into your code, the rest is just streamlining your style. "Less is more", as they say.