0

I'm trying to create a div of variable height which would have 2 backgrounds colors:

  • one background covering its whole surface
  • one background starting 30% from the top of the window and which height would be 70% of the window (not the div). This background would be fixed on scroll.

I've tried everything and still can't find a good way to do this, even when playing with background images. I'd like to avoid position: fixed if possible. and stick with background-attachment: fixed.

Here is the effect I would like to get: http://jsbin.com/gabuvakegane/1/

Is there any way I can this easily done, with a decent browser support (IE9 required) ?

Ronan
  • 177
  • 1
  • 12

1 Answers1

1

The example you posted is using a fixed position div, with a :before to set the secondary color.

So the code is pretty simple.

HTML

<div class="wrapper">
    <div class="inner-wrapper">
       YOUR INTERNAL STUFF/CONTENT GOES HERE
    </div>
</div>

CSS

    .wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color:pink;
    overflow: scroll;
    z-index: 1;
}
.inner-wrapper {
    z-index: 10;
}
.wrapper:before {
    content: '';
    position: fixed;
    top: 30%;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: green;
    z-index: -1;
}

fiddle: http://jsfiddle.net/6zcx8q2a/

Trattles
  • 647
  • 1
  • 6
  • 21
  • Thanks but I would like to avoid using `position: fixed` and rather use `background-attachment: fixed` if that's possible – Ronan Sep 21 '14 at 06:27
  • It is possible, but then you cannot specify a percentage of the window height. If you want to use a percentage of the window height and oh will need to use fixed. If you don't want to use fixed, then you will need to use some other height, and won't be able to ensure your "30% from the top" requirement without some javascript. – Trattles Sep 21 '14 at 16:04