Text not very readable on different image backgrounds

by

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:

standard

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

Adding Text Shadows:

with text shadow

CSS:

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

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

with semi-transparent background

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?

enter image description here

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

Attribution
Source : Link , Question Author : AyB , Answer Author : SaturnsEye

Leave a Comment