hide webpage element partially - html

Question

My webpage has static navigation menu at top, but is lowered a bit and background is visible above it. When text in page is scrolled down it goes beneath menu and then is again visible above the menu. How can I hide the part of text which is above menu. Also the background will be an image.
If I place the text in <div> element below menu and set overflow:auto, scroll bar is then moved to the side of div element, not the page body as it is intended to be.
EDIT: Here is jsfiddle link http://jsfiddle.net/EmpireGlitch/N9xg2/
HTML:
<div class="topline">
<div class="menu">
<ul class="interpage_navigation">
<li>Choice 1
</li>
<li id="active_tab">Choice 2
</li>
</div>
<div id="top_seperator"></div>
</div>
<div class="article">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum.</p>
</div>
CSS:
.menu .interpage_navigation li {
background-color: rgba(25, 102, 25, 0.8);
}
.side, #top_seperator, #active_tab {
background-color: rgba(50, 205, 50, 0.8);
}
.topline {
position: fixed;
top: 60px;
width: 100%;
}
#top_seperator {
height: 40px;
width: 100%;
clear: both;
}
.menu {
margin:0px;
margin-left:100px;
position: absolute;
bottom: 40px;
}
.menu > ul {
overflow: auto;
list-style-type: none;
padding:0px;
padding-left: 15px;
margin:0px;
//border: solid blue 1px;
}
.menu li {
float:left;
margin:0px;
}
.menu .interpage_navigation li {
width:120px;
height: 40px;
margin-right: 15px;
font-family: verdana, arial;
text-align: center;
line-height: 40px;
text-decoration: none;
text-transform: uppercase;
}
.article {
background-color: rgba(200, 200, 200, 1);
margin-bottom: 20px;
padding:20px;
padding-top: 5px;
font-size: 18px;
position: absolute;
top: 0px;
margin-top: 125px;
left: 30%;
right:15%;
z-index: -1;
}

Answer 1

I have used the :before pseudo element to create an element to place over the top of the page - http://jsfiddle.net/N9xg2/1/
The problem with this is that it is dependant on having a solid colour.
You may want to re-think how you're positioning the article - using position:absolute is going to really limit you.

Answer 2

My solution was similar to Richard's, except I just gave .menu a background (and tweaked its padding).
.menu {
margin:0px;
padding-left:100px;
position: absolute;
bottom: 40px;
background-color: white;
width: 100%;
padding-top: 20px;
}
Demo here
But I know you want to use an image background. You can solve that problem by using:
background-attachment: fixed;
Demo here