wrapper에 배경이미지로 특정 영역에 반복시 width값이 설정되는 현상
화이트
css2에서는 요소에 배경이미지를 하나만 지정할 수 있다고 알고 있습니다. 포스코ICT 페이지를 보게 되면 화면을 최대한 축소시켰을 때 화면의 가로 항향으로 여러개의 배경이미지가 펼쳐지게 할려고 코드를 짰는데 원하는대로 배경이미지가 길어지지 않았습니다. body에 지정한 배경이미지는 화면이 최대로 축소, 확대가 되었을 때도 끝까지 이미지가 반복되어서 나오는데 wrapper에 지정한 배경이미지는 확대를 하게되면 처음 브라우저 화면에는 끝까지 보이는 것처럼 나오는데 확대가 많이 되어서 가로 스크롤바가 생기게 되어서 이동하게 되면 딱 브라우저 길이를 벗어나는 부분부터는 이미지가 잘려서 나오지 않습니다.
이해가 안되는게 body는 되는데 wrapper에 지정한 영역만 잘리는게 도통 모르겠습니다. 그리고 body부분에 배경이미지로 지정한 부분이 끝까지 늘어나기는 하는데 파이어버그로 body부분을 보면 width값이 잡혀져 있거든요.그런데 wrapper영역과 똑같은 길이로 width값이 잡혀있는데 body는 그 영역을 벗어나서까지 확장이 되고, wrapper는 확장이 안되는지 이해가 안됩니다.
min-width값으로 wrapper에 최소 길이를 지정해주면 되긴 하는데 body와 wrapper에 각 각 지정한 배경이지가 다르게 나오는 이유를 모르겠습니다. 고수님들 왜 그런지 도와 주십쇼 ㅜㅜ
간단히 영역만 지정한 파일을 같이 올리겠습니다.
-
꽃겨울
답변 감사합니다. 그런데 body wrapper 영역이 줄어드는 건 알겠는데 화면에 표시될때 body는 브라우저 크기를 넘어서까지 표시되고 wrapper영역은 그렇게 안된다는게 잘 이해가 안되네요^^:;
-
슬현
어쩐면 그게 당연한것 아닌가요? wrapper에 width=100% 주면 당연 브라우저를 줄이면 브라우저 크기에 맞게 줄어더는데 필셀로 고정된 부분은 줄어들지 않고 있으니 하단에 스크롤바가 생기고 그사이 브라우저 크기의 100% 맞추느라 줄어든 wrapper는 스클로 오른쪽 가보면 비어 있는게 ...당연한것 같은데요. 그게 싫으면 역시 min-width값을으로 픽셀로 지정해 주면 아래쪽 내용들고 같은 크기를 유지 할거구요. 적어도 빈 공간이 보이지는 않