Question

My content scrolls beneath the left sidebar instead of disappearing when it reaches the sidebar. Both the left sidebar and the bottom footer are fixed.

http://karpouzaki.com/finaltouch/

Any suggestions?

Answer 1

You need to change your background from transparent to opaque. Add these styles:

#sidebar {
  background: url(../img/bg.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  height: 100%;
  z-index: 1;
}
#footer {
  z-index: 2;
}

That should do it – it gives your sidebar the same image background, but it looks like it flows fine into the rest of the page. It extends the height of your sidebar so that the rest of the content scrolls “beneath” it. And the z-index changes cause the sidebar to be above the content but below the footer.