2011-03-20 4 views
0

지금은 내 몸 태그에 하나의 큰 가운데 이미지를 사용하고 있습니다.div 태그를 브라우저 바닥까지 확장하려고 시도했습니다.

첫 번째 이미지는 기본적으로 첫 페이지가 될 것입니다. 좋은데.

enter image description here

두 번째 이미지는 어떤 내용을 가지고 있으며, 바닥 글 및 전체 페이지를 아래로 밀어. 그러나 여전히 괜찮아 보인다.

enter image description here

이 마지막 이미지 콘텐츠를 많이 가지고 있으며, 심지어 몸 배경 이미지의 높이를지나 아래로 모든 것을 밀어.

enter image description here

그래서 내 생각은 너무 당신이 첫 번째 이미지에서 보는 색상의 변화, 바닥 글의 시작에서 배경을 분할하고, 바닥 글 DIV의 배경으로이 추가됩니다.

하지만 문제는 배경의 일부가 첫 번째 이미지의 브라우저를 통과한다는 것입니다. BG를 내 바닥 글 DIV에 넣으려면 높이가 500px가되어야하며 스크롤바가 생깁니다.

본질적으로 배경의 아래쪽 부분을 내 바닥 글 DIV에 넣고 스크롤바를 만들지 않으므로 BODY처럼 작동하게하고 싶습니다.

이전의 설명보다 분명하다고 생각합니까? 이것은 설명하기 어렵다!

+0

[끈끈한 바닥 글] (http://ryanfait.com/sticky-footer/) 후에 있습니까? – thirtydot

+0

번호. 꼬리말은 항상 주요 콘텐츠 상자 바로 아래에 있습니다. – Adam

+5

질문이 명확하지 않습니다. 스크롤바가 필요 없으며 사용자가 배경의 끝을 보지 못하게해야합니다. 당신은 무엇을 성취하려고 노력하고 있습니까? 당신의 이미지와 설명은 이해하기 어렵습니다. 질문을 다시 말하십시오. – Hussein

답변

0

첫 번째 스크린 샷에서 배경은 하나의 큰 이미지입니까? 예, 배경을 위로 나눌 필요가 있습니다.

이제 이러한 것들을 가정 할 수 있습니다 :. 당신은 몸의 배경이 아닌 이미지의 일부입니다 블랙에 대한 신체 (그리고 표시되는 검은 색 막대의 배경색을 설정 한

1.))

2. 하단 이미지가 바닥 글 div의 배경 이미지가되도록 이미지를 분할했습니다.

브라우저 창과 떨어져있는 여백이 없는지 확인하고 브라우저 자체에서 생성 한 기본 여백을 재설정하여 검정색 막대를 제거 할 수 있습니다. (예 : body {margin : 0;}) 그러나 바는 다른 브라우저 (일반적으로 Safari)에 계속 표시 될 수 있습니다. 한 가지 해결책은 <body> 태그의 배경을 바닥 글 태그와 동일하게 설정하는 것입니다. 이것은 반복적 인 이미지로만 작동합니다.

나는 가장 좋은 방법은 가장자리에서 한 것처럼 이미지의 아래쪽을 검은 색으로 희미하게 만드는 것이라고 말하고 싶습니다.

background: scroll;을 사용하면 콘텐츠가 배경 위로 스크롤되지만 다른 해상도로 보았을 때 이미지의 아래 부분을 볼 수 있습니다.

관련 문제