How can one create an overlay in css?

Question

I\'d like to create a div with an arbitrary size, then display something on top of that div. What is the best way to position and size the overlay exactly as the div below i

Answer 1

Here is an overlay using a pseudo-element (eg: no need to add more markup to do it)

.box {
  background: 0 0 url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
  width: 300px;
  height: 200px;
}

.box:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}