website design - Text not very readable on different image backgrounds

I've come here seeking for a bit of design help or advice on how I could possibly improve the following:

Like the title says, I'm having a website banner with multiple text displayed on different images as backgrounds. Now, since most of the images are dark, I've set the font color as white. But even then, some of the text is not very readable on a couple of images like:

Since I'm working with CSS, I've tried different options such as:

Adding Text Shadows:

CSS:

text-shadow: 3px 3px 0px #000;

Also tried, creating a semi-transparent box around the text:

Demo

I feel the box one looks out of place.

I've created a fiddle for anyone who knows CSS. If not, please feel free to advice me based on your imagination alone.

PS: You could also advice on using a different font if that would help it stand out better.

Answer

As an alternative to the already great answers, how about adding a black div with 50% opacity behind the text?

This would allow the font to work on basically any image also.

div {
    position:absolute;
    top:250px;
    left:140px;
    width:500px;
    height:50px;

    background-color:black;
    z-index:0;
    opacity:0.5;
}

EXAMPLE