Question

Take a look at this site. I am trying to make the main content scroll beneath the orange horizontal line, without appearing above it, and at the same time keeping the native browser scroller. With the latter iframe or layer overflow: auto; is out of the question. Also chopping images to put them on top would not work because of the scalable background.

Any ideas? Javascript needed?

Answer 1

Add another

<div id="header-bilde">
 <img src="/images/sized/bilder/bilde1-1200x962.jpg" width="1268" height="1016" alt="">
</div>

with style:

#header-bilde {
    margin: 0;
    padding: 0;
    position: fixed;
    width: 100%;
    height: 150px;
    overflow: hidden;
    z-index: 9;
}

between #venstre and #hoyre.

Give #delicatessen, #majorstuen and #venstre z-index:10;

Give #hoyre z-index: 8;

Then apply the same js manipulation that you do for #bakgrunnsbilde to the #header-bilde div.