Use a div as a mask over a fixed image

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