Use a div as a mask over a fixed image - html

Question

I'd like to had a specific design to a webpage i'm designing.
The main wrapper contains a succession of <div class='section'> and <div class='section-header'>. The section-header should display the section's title over an image.
exemple:
<div id="tag" class="section-header">
<h1>Title</h1>
<img src="assets/img/some_image.jpg">
</div>
So far my css is:
.section-header
{
width: 100%;
height: 192px;
overflow: hidden;
}
.section-header > *
{
width: 100%;
line-height: 192px;
margin: 0;
}
.section-header > h1
{
position: absolute;
z-index: 10000;
text-align: center;
}
.section-header > img
{
filter: opacity(50%);
}
however i'd like to add some relative movement between the background image and the section-header. I basically wanted to fixe the image to the screen with position: fixed; and let the overflow: none; do the job.
However it appears that as soon as I add position: fixed; top: 0; to .section-header > img, the overflow isn't hidden anymore and the image is visible regardless of the position of the header it's nested in.
How can I solve that ?
Edit:
devel code is visible here. I'd basically have the image behind each section's title not to scrool with the page, and just to have the section's header reveal it as you scrool

Answer 1

If I understand the effect you want, you may need to use the img as background; try this:
body{
background: #f3f3f3;
height:800px;
}
div {
text-align:center;
color:white;
width:80%;
margin:150px auto;
line-height:200px;
background:url('http://lorempixel.com/600/600') no-repeat center;
background-attachment: fixed;
}
div h1 {
font-size:3em;
}
<div>
<h1>Mytitle</h1>
</div>
Jsfiddle Demo

Answer 2

Overflow is ignored for position:absolute children in parent that is relatively positioned.
One way of fixing the problem is giving .section-header a position:absolute or position:fixed too. (whichever is most useful for you).
like this :
.section-header
{
width: 100%;
height: 192px;
overflow: hidden;
position: absolute;
}
see this jsfiddle