Фоновый рисунок и полоса прокрутки

Question

Существует страница с фоном. Раньше было дано как img: src. Но я не мог вставить в него текст. Из-за этого я изменил этот код как фоновое изображение. пока все в порядке.

Тогда текст, который я вставляю, длинный, он превышает высоту фона. Я должен добавить свиток. Я вставил max-height, но здесь был сбит с толку.

здесь страница: http://www.heptasarim.com/test/cezayir2/menuler2.html

Фоновая адрес: /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; 
} 

Исправлено:

background: url(../image/menuorta.png) no-repeat; 

.. и /

Спасибо очень очень много для всех. Специально для @ ferne97

Answer 1

Установите его по ширине и высоте и добавьте overflow-y: scoll; к нему.

#myazi { 
    width: 600px; 
    height: 200px; 
    overflow-y: scroll; 
} 

Если вы хотите фоне большего, чем область прокрутки, поместите другой DIV внутри, как это ..

<div id="myazi"> 
    <div class="inner-scroll"> 
     <!-- content here --> 
    </div> 
</div> 

Тогда в CSS добавить это ..

#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

Пожалуйста удалить Следующие:

max-height :200px ; 

Установка фонового изображения на 200px height.

И чтобы улучшить представление вашего пара, вы можете использовать свойство css3 coloumn, чтобы лучше форматировать его. Прокрутка для меня является нездоровым способом представления содержимого домашней страницы.

Здесь вы можете увидеть и научиться реализовывать - http://www.quirksmode.org/css/multicolumn.html