흔한 실수: 배경이 잘려 보이는데
샘플 파일을 볼 때 해상도가 1280보다 작아도 문제가 없습니다. 하지만 모니터의 해상도가 1280픽셀보다 큰 경우 배경 이미지 이외의 부분이 보입니다.
문제에 대한 간단한 해결책: 이미지의 가장자리 색상을 웹 페이지의 배경색과 동일한 색상으로 설정합니다. 여기서는 Web Designer Wall을 예로 사용합니다. 아래 그림을 보면 그림의 가장자리가 단색으로 표시되어 있습니다.
CSS 부분
이 부분은 매우 간단합니다. body 요소(가운데, 상단에 위치)에 대한 배경 이미지를 설정합니다.
다음은 CSS 코드입니다.
몸 { 패딩: 0; 여백: 0; 배경: #f8f7e5 url(wdw-bg.jpg) 반복 없음 중앙 상단; 너비: 100%; 디스플레이: 테이블; } |
본문 선택기에는 두 개의 추가 줄이 있습니다. 이는 Firefox에서 발생하는 브라우저 창이 콘텐츠 너비보다 작을 때 배경 이미지가 변경되는 것을 방지하기 위한 것입니다.