저자가 대형 배경 웹 디자인 모음을 발표 한 이후, CSS를 사용하여 큰 배경 웹 디자인을 구현하는 방법을 묻는 많은 이메일을 받았습니다. 따라서 나는 백그라운드에서 웹 사이트의 디자인 기술을 당신과 공유하기로 결정했습니다. 이 튜토리얼에서는 하나 또는 두 개의 사진을 사용하여 큰 배경 웹 사이트의 디자인을 구현하는 방법을 설명하기 위해 몇 가지 예제를 사용합니다.
자주 실수 : 배경이 잘립니다
샘플 파일을 살펴보면 1280 해상도 미만인 경우 아무런 문제가 없습니다. 그러나 모니터가 1280 픽셀보다 큰 해상도가 있으면 배경 이미지 외부의 부품이 표시됩니다.
문제에 대한 간단한 솔루션 : 웹 페이지의 배경과 같은 색상으로 그림의 가장자리 색상을 설정하십시오. 여기서 나는 웹 디자이너 벽을 예로 사용하고 아래 그림을보고 그림의 가장자리는 단색입니다.
CSS 부분
이 부분은 간단합니다. 신체 요소의 배경 이미지를 설정하십시오 (중앙에 위치).
CSS 코드는 다음과 같습니다.
| 몸 { 패딩 : 0; 여백 : 0; 배경 : #f8f7e5 URL (wdw-bg.jpg) 비 반복 센터 상단; 너비 : 100%; 디스플레이 : 테이블; } |
신체 선택기에 두 개의 추가 선이 있다는 사실에주의를 기울여 브라우저 창이 콘텐츠 너비보다 작을 때 배경 이미지가 변경되며 Firefox에 나타납니다.
