HTML background opacity no to affect the foreground

Question

I have an image for my background that has an opacity on .4. I have an image in front of it that seems have the same opacity. What do I do so the opacity of the front image is 1.0?

Here is a jsfiddle.

http://jsfiddle.net/aaronmk2/6zjtgxdm/150/

Here is my html

<div>Hello World

<img src="http://i.dailymail.co.uk/i/pix/2013/11/11/article-2500617-007F32C500000258-970_306x423.jpg" alt="">
</div>

and my css

div{
    width : auto;
    height : 1000px;
    background-image : url("http://i.dailymail.co.uk/i/pix/2013/11/11/article-2500617-007F32C500000258-970_306x423.jpg");
    background-position:  65% 65%;
  background-repeat:   no-repeat;
  background-size:     cover;
  opacity: .4;
}

Answer 1

I found a solution. You need to put your background image in the div::after pseudo element, like this :

div{
    width : auto;
    height : 1000px;
}

div::after {
  content: "";
  background-image : url("http://i.dailymail.co.uk/i/pix/2013/11/11/article-2500617-007F32C500000258-970_306x423.jpg");
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1; 
  background-position:  65% 65%;
  background-repeat:   no-repeat;
  background-size:     cover;
}

Like this, the div element doesn't have the transparent opacity, which was previously applied to its child element, the image.

I updated your fiddle