align the background-image of :after to its parent container

Question

I want to get a transparent background-image within my content div. In order to do this without effecting the child elements of the .content I defined a background-image of .content:after and wanted to set its position to the position of my .content.

The problem is: in this code the background-image starts at top: 0, left: 0, right: 0, bottom: 0 of the body. How can I get this to start at my .content? Another problem with that is that I actually have a header too which has a flexible height. So don't know the absolute top-position of the .content.

.content {
  width: 200px;
  margin: 10px auto;
}
.content:after {
  content: "";
  background-image url("http://works.mihaimoga.com/stackoverflow_logo.jpg");
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.7;
}

Answer 1

Instead of using :after pseudo class, you can use background value as rgba. which will not effect transparency to child elements.

.content {
    width: 200px;
    margin: 10px auto;
    background-image url("http://works.mihaimoga.com/stackoverflow_logo.jpg");
    background-color: rgba(255, 255, 255, 0.7);  /* added */
}

Answer 2

Set your .content div to position: relative, and your .content:after to position: absolute. Make sure you apply the correct z-indexes. the .content:after should have a higher z-index than .content.

should look like this:

.content {
  width: 200px;
  margin: 10px auto;
  position: relative;
  z-index: 10;
}
.content:after {
  content: "";
  background-image url("http://works.mihaimoga.com/stackoverflow_logo.jpg");
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.7;
  z-index: 20;

}