How To Create Responsive Text On Top Of An Image?

I'm really not sure how to pose this question any other way, but I'm trying to load text on top of an image - which appears to be a tricky task in itself, but I've got it going usi

Solution 1:

Here are the changes I would make:

• Position the span using bottom rather than top, so you always have a specific margin between the span and the bottom of the image.
• Use a percentage-based line-height so that it will change proportionally to the font-size
• Add some padding to the right of the span, so the text doesn't bump right up on the edge of the span

Updated CSS:

.herotext span {
    position:    absolute;
    bottom:      20px;
    font-family: 'museo_slab500';
    font-size:   150%;
    color:       #fff;
    padding:     0 20px;
    width:       40%;
    line-height: 150%;
    background:  rgb(0, 0, 0);
    background:  rgba(0, 0, 0, 0.7);
}