HTML background opacity no to affect the foreground - html

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

you can give div position relative and use before with same image and give before same opacity.
you can check below given code within jsfiddle.
/* Here is the code Start */
div{
width : auto;
height : 1000px;
position:relative;
}
div:before{
content:" ";
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
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: 0.4;
}
/* Here is the code Start */

Answer 2

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