: 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

@Chiappetta793

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

Vote Up Vote Down

@Voss6371140

Give it a black transparent background and some padding


background-color: rgba(0,0,0,0.5);

padding: 0.5em;


Simply play a bit around with those numbers but it should give you an usable result.

Vote Up Vote Down

@Murphy569

I suggest making the font bold (just a change of weight, not the font itself) and respecifying the shadow so that it defines all the edges of the letters:



font-family: Raleway;
font-weight:900;
text-shadow: 0px 0px 3px #000 ;


You can even combine more than one text-shadow to create a definite outline as well as a blur:



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

Vote Up Vote Down