Background Color Pseudo Element

by Matthew Day

HTML

<div>
Here is some content
</div>

CSS

div {
  background: url('https://placeimg.com/1000/200/any');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 12px 0;
  position: relative;
}

div:after {
  background: thistle;
  bottom: 0;
  content: '';
  left: 0;
  opacity: 0.4;
  position: absolute;
  top: 0;
  width: 100%;
}

JavaScript

/*


When using a pseudo element to place a background color over a background image on the parent element, we normally declare a height. However, this is problematic when the parent element does not have a declared height. Here, for example, the "height" of the parent element comes from the line of text itself as well as the padding but the pseudo element does not see this.

To get around this, use display: block and top: 0 and bottom: 0 on the pseudo element.

When top and bottom are at 0, we do not need to declare a height.

SOURCE
http://stackoverflow.com/questions/26502411/css-pseudo-element-full-height (answer by Vitorino fernandes)

*/