Background Image and Scroll bar - css

Question

There is a page with background. Before was given as img:src. But I couldn't insert text on it. Because of this I changed that code as background-image. so far everything is ok.
Then the text I'll insert is long, it exceed height of background. I must add an scroll. I inserted max-height but confused here.
here the page is : http://www.heptasarim.com/test/cezayir2/menuler2.html
Background adress : /cezayir/images/menuorta.png
HTML:
<div id="menuorta2">
<p style="background-image:url(images/menuorta.png); background-repeat:no-repeat; width:812px; height:404px;" id="myazi">
<span class="mbaslik">Kokteyl Prolonge Menü</span><br />
<strong>menü:</strong><br />
<strong>soğuk gezenler:</strong><br />
biberli zeytin ve marine somon<br />
tartolet içinde nar ekşili patlıcan salata<br />
hindi füme badem turşu ve hardal<br />
marine zeytin ve peynir şiş<br />
<strong>sıcak gezenler:</strong><br />
şişte ızgara limon ve kalamar<br />
susamlı et<br />
sigara böreği<br />
<strong>sıcak büfe:</strong><br />
dana külbastı<br />
kuru erikli tavuk<br />
patlıcan beğendi<br />
pilav ve salata<br />
<strong>tatlılar:</strong><br />
bal kabaklı cheese cake<br />
portakallı irmik helvası<br />
</p>
</div>
CSS:
#menuorta {
top:165px;
left:50px;
position:absolute;
z-index:0;
}
#menuorta2 {
top:127px;
left:20px;
position:absolute;
z-index:1;
}
#myazi {
color:#401c17;
font-weight:100;
font-family:Bookman Old Style;
font-size:13px;
padding:40px 65px;
max-height:200px;
overflow:hidden;
}
.mbaslik {
font-weight:bold;
font-size:16px;
}
Fixed :
background: url(../image/menuorta.png) no-repeat;
.. and /
Thank you very very very much to everyone. Especially to #ferne97

Answer 1

Set it to the width and height you want and add an overflow-y: scoll; to it.
#myazi {
width: 600px;
height: 200px;
overflow-y: scroll;
}
If you want to the background larger than the scroll area, place another div inside like this..
<div id="myazi">
<div class="inner-scroll">
<!-- content here -->
</div>
</div>
Then in the css add this..
#myazi {
background: url(path/image.png) no-repeat;
width: 800px; /* width of actual image */
height: 600px; /* height of actual image */
}
.inner-scroll {
width: 600px; /* width of content area */
height: 200px; /* height of content area */
overflow-y: scroll;
}

Answer 2

Please remove The following -
max-height :200px ;
This is setting the background image to 200px height .
And to improve the way your para is represented , you can utilize the css3 coloumn property to format it in better way . Scrolling is for me an unhealthy way to represent home page content.
Here's where you can see and learn to implement - http://www.quirksmode.org/css/multicolumn.html