Amxx Amxx - 2 months ago 19
CSS Question

Use a div as a mask over a fixed image

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

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

Comments