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;
}

Please post HTML as well or JSfiddle would be helpful to debug code — Pravin W, Apr 16 '14 at 12:35
This looks similar: [Transparent background, but not the content (text & images) inside it, in CSS only?](http://stackoverflow.com/questions/806000/transparent-background-but-not-the-content-text-images-inside-it-in-css-on?rq=1) — ilias, Apr 16 '14 at 12:37

score 1 · Accepted Answer · answered Apr 16 '14 at 12:36

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 */
}

answered Apr 16 '14 at 12:36

Mr_Green

40,727
45
159
271

@Jere did you remove the `:after` styles? – Mr_Green Apr 16 '14 at 12:40
@Jere if my solution is not working.. remove my stylings and try adding `position: relative` to `.content` and also keep the `:after` stylings. let me know the result. – Mr_Green Apr 16 '14 at 12:46
@Jere try giving `z-index` to `:after` pseudo class. – Mr_Green Apr 16 '14 at 13:08

score 0 · Answer 2 · answered Apr 16 '14 at 13:12

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;

}

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

2 Answers2