Skip to main content

Overlay the image

.darken {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(YOUR IMAGE HERE);
}

Example: http://jsfiddle.net/drpak8vy/1/

Put text in a box

.text-box {
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
display: inline;
padding: 10px;
}

Example: http://jsfiddle.net/qg83m36p/

Floor fade

.floor-fade {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6) ), url(YOUR IMAGE HERE);
}

Example: http://jsfiddle.net/gRzPF/409/