배경 이미지 및 스크롤 막대

Question

배경이있는 페이지가 있습니다. 이전은 img : src로 주어졌습니다. 하지만 텍스트를 삽입 할 수 없습니다. 이 때문에이 코드를 배경 이미지로 변경했습니다. 지금까지 모든 것이 괜찮습니다.

그러면 삽입 할 텍스트가 길어 지므로 배경 높이가 초과됩니다. 나는 두루마리를 더해야한다. 최대 높이를 삽입했지만 여기서는 혼란 스럽습니다.

여기 페이지는 다음과 같습니다 http://www.heptasarim.com/test/cezayir2/menuler2.html

배경 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; 
} 

고정 :

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

.. 및/

모두에게 아주 아주 아주 많이 감사합니다. 특히 @ ferne97의 경우

Answer 1

원하는 너비와 높이로 설정하고 overflow-y: scoll;을 추가하십시오. 당신이 스크롤 영역보다 더 큰 배경으로합니다

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

,이 같은 안에 다른 사업부를 배치 ..

<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 ; 

배경 이미지를 200 픽셀 높이로 설정합니다.

그리고 para 표현 방식을 개선하기 위해 css3 coloumn 속성을 활용하여 더 나은 방식으로 형식을 지정할 수 있습니다. 스크롤은 홈 페이지 콘텐츠를 표현하기에 건강에 좋지 않은 방법입니다. 당신이 페이지에 일이하고 싶어 http://www.quirksmode.org/css/multicolumn.html