2011-12-04 4 views
0

배경 이미지 채우기 문제를 해결하는 데 도움을 얻으려고합니다. 나는 마침내 알아 낸 끈적한 바닥 글을 갖고 싶었지만 이제는 작은 창에서 내 사이트를보고 아래로 스크롤하면 내 배경 이미지가 사라집니다. 내 높이 설정이 내 이미지를 초기 뷰포트 크기를 기반으로하는 100 %로 설정했기 때문에 발생하는 것으로 알고 있지만 어떤 종류의 수정도 구현할 수는 없습니다.CSS : 스크롤 할 때 배경 이미지가 채워지지 않습니다. - redux

다음은 현재 개발중인 사이트입니다 (아직 많이 개발 중입니다) : http://student.plattsburgh.edu/stipl001/index.html.

작은 창에서이 페이지를 볼 때 문제가 가장 잘 보입니다. http://student.plattsburgh.edu/stipl001/resume.html.

다양한 사이트에서 여러 개의 게시물을 읽었습니다 (여기에는 이것을 포함하여 : CSS: background image does not fill when scrolling).하지만 운이 좋지는 않습니다. 나는 내가 생각할 수있는 CSS의 백그라운드에 대한 모든 다른 속성들을 설정하려고 시도했다. 그런 다음 오버플로 속성을 실험했지만 텍스트를 모두 숨기거나 이상한 스크롤 막대를 만들어 내 텍스트를 머리글 위로 스크롤합니다. 또한 페이지 배경을 html로 이동하고 컨테이너 배경을 컨테이너에서 본문으로 이동하려고 시도했지만 아무 것도 변경하지 않았으므로 잘못된 두 가지 작업을 수행해야합니다.).

나는 코딩 초보자이며 내가 따라갈 때 자신을 가르쳐 왔기 때문에이 문제를 해결하는 방법에 대한 구체적인 제안은 내 사이트에 가장 적합 할 것이며, 구현 방법에 대한 구체적인 제안은 정말 고맙게 생각합니다. 이 한 가지 문제에 대해 약 10 시간을 똑바로 소비 한 후에 나는 지혜롭게 끝나고있다.

정말 고마워요! 최소 높이를 100 % :

답변

0

는 최소 높이를 변경 ... 1092px (이미지의 높이) 그리고 당신은 괜찮을거야

편집 :

이전 대답은 조금 너무했다 빨리, 코드에서 두 번째 모습을 보았습니다. 오류가 플로팅 된 열로 인해 발생했음을 알았습니다. 요소를 플로팅하는 경우 컨테이너 요소는 플로팅 된 요소의 높이를 상속받지 않습니다. 높이가 100 %로 설정된 이유입니다. 초기 창이며 내용 열이 길면 확장되지 않았습니다. #container에서 #rightcolumn 뒤에 clear 요소를 추가하면이 요소를 모두 수정할 수 있습니다. 두 요소 모두 부모 요소가 내용의 높이를 차지하도록합니다.

개선 된 고정 바닥 글을 포함하여 단순화 된 예를 보려면 http://jsfiddle.net/uS7Ba/1/을 참조하십시오.

희망 하시겠습니까?

+0

조언 해 주셔서 감사합니다! 그것이 처음에 내 사이트를 설정 한 방법입니다. 그것은 작동하지만, 사람들이 빈 공간을 아래로 스크롤해야만 footer를 볼 수 있다는 것을 의미합니다. footer는 최소 높이 (100 %)로 피하려고했습니다. 나는 또 다른 대안을 찾을 수 없다면 높이 값에 대한 px 값을 다시 설정 해야겠다.하지만 그렇게하지 않기를 바랬다. – kyreth

+0

예, 지금 당장 깨달았습니다. 하지만 당신이 언급 한대로 - 고정 바닥 글이 제대로 작동하지 않습니다 ... 잠시만 요, 제가 당신을 위해서 무언가를 고칠 수 있는지 보겠습니다. – ptriek

+0

당신은 제 영웅입니다! 그것은 내가 그것을하기 위해 필요로했던 바로 그 것이었다. #footer 아래에 두 속성을 모두 명시했지만 #container에 넣지는 않았습니다. 나는 지금 훨씬 더 기분이 좋습니다, 당신의 도움에 감사드립니다! 편집 : 꼬리말의 서식이가는 한, 링크에서 설정을 사용해 보았습니다. 그러나 고정 된 꼬리말이 내가 찾고있는 것이라고 생각하지 않습니다. 화면 하단에 붙어 있어도 페이지 하단에 붙어있는 것이 좋습니다.내가 지금 코딩 한 방식에 특별히 잘못된 것이 있습니까? – kyreth

관련 문제