백그라운드에서 떠 다니는 div

플로팅 div를 만들기 위해 -1 z 인덱스가 항상 백그라운드에있게하려고 시도하지만, 절대 위치로 만들면 사라집니다. 또한 Y 반복 이미지로 가운데에 배치하고 싶습니다.백그라운드에서 떠 다니는 div

.perchament{ 
    position:absolute; 
    margin:0 auto; 
    height:100%; 
    background: url("image_assets/parchment.png") repeat-y; 
    margin-top:25px; 
    z-index:-1; 
}

출처

2012-07-16 Zhafur

div에 너비를 추가하십시오. –

떠 다니는 배경 div 대신 배경을 사용 해본 적이 있습니까? –

콘텐츠가 없기 때문에 사라지고 너비가 지정되지 않습니다.

은 CSS이 추가 :

left: 50%; 
width: 100px; 
margin-left: -50px;

폭은 설정해야하고 왼쪽 여백은 항상 절반이다.

다른 사람이 말했듯이

DEMO

, 왜 그냥 몸에 배경 이미지를합니까?

출처

2012-07-16 15:40:18 sachleen

감사합니다. "센터"가 내 문제를 해결했습니다! – Zhafur

이 경우에는 div에 너비를 추가해야합니다 (절대적으로 위치하므로).

그러나 body 요소 또는 이와 유사한 요소에 대한 background 규칙의 문제는 무엇입니까?

출처

2012-07-16 15:40:31

절대적으로 위치를 지정하는 요소는 여백 등 대신 "위쪽"및 기타 위치 지정 컨트롤을 사용하고 폭과 높이를 설정해야합니다.

.perchament{ 
     position:absolute; 
    top: 0; 
    left: 0; 
width: 500px; 
     margin:0 auto; 
     height:100%; 
     background: url("image_assets/parchment.png") repeat-y; 
     margin-top:25px; 
     z-index:-1; 
    }

그게 도움이 되나요?

마이너스 Z- 색인을 사용하지 마십시오. 대신이 항목을 z-index : 1로 설정 한 다음 Z- 색인으로 컨테이너 위 (다른 모든 항목 포함)를 설정하면됩니다. 2.

또는 원하는 배경 이미지 일 수 있습니다. div 대신 문서의 BODY 태그에 붙여 넣기 만하면됩니다. BODY 또는 HTML 요소는 항상 스택의 맨 아래에 있습니다.

출처

2012-07-16 15:42:23

백그라운드에서 떠 다니는 div

답변

관련 문제