사이트 콘텐츠 뒤에 이미지를 표시하여 시각적 효과를 만드세요.

일부 버전 7.0 사이트에서는 사이트 콘텐츠 뒤에 표시할 배경 이미지를 추가하여 사이트의 분위기를 설정하는 데 도움이 되는 시각적 요소를 만들 수 있습니다.

다음 템플릿 그룹에서 사이트 전체 배경 이미지를 추가할 수 있습니다.

• Adirondack
• Avenue
• Aviator - 정보 페이지는 페이지별 배경 이미지도 지원합니다.
• Five
• Forte
• Momentum
• Montauk
• Native

모든 배경 이미지를 여백 없음으로 설정하여 브라우저의 가장자리까지 페이지를 가득 채울 수 있습니다. 템플릿이 사이트 전체 배경을 지원하지 않는 경우 페이지별 배경을 만드는 방법을 알아보세요.

버전 7.1은 사이트 전체 배경 이미지를 지원하지 않지만, 대부분의 페이지 섹션에서 사이트 콘텐츠 뒤에 표시되는 배경 이미지를 추가할 수 있습니다.

모범 사례

선택하는 이미지 유형은 개인적인 미적 감각과 사이트의 목표에 따라 다르지만 몇 가지 일반적인 가이드라인은 다음과 같습니다.

• 너비가 1500픽셀에서 2500픽셀 사이인 이미지를 업로드하는 것을 권장합니다. 로딩 문제가 발생하는 경우(예: 모바일에서 배경 이미지가 로드되지 않는 경우) 모든 이미지의 가장 긴 변을 1500픽셀로 줄여 보세요. 이렇게 하면 이미지 품질을 유지하면서 로딩 속도를 높일 수 있습니다.
• 여백 없음 배경 이미지는 모바일에서 컴퓨터와 다르게 잘리는 경우가 많습니다. 다양한 방식으로 자를 수 있는 배경 이미지를 선택하는 것이 좋습니다.
• 추상적인 패턴, 텍스트가 없거나 테두리가 없는 이미지, 반복되는 패턴이 일반적으로 가장 효과적입니다. 이러한 이미지가 항상 어느 정도 발생하는 잘림에 더 많은 유연성을 제공하기 때문입니다.
• 템플릿을 변경해도 배경 이미지는 이전되지 않습니다.

이미지 추가

사이트 전체 배경을 추가하는 방법은 다음과 같습니다.

1. 디자인 패널을 연 다음 사이트 스타일을 클릭합니다.
2. 배경 이미지, 사이트 배경 이미지 또는 페이지 배경 이미지라는 이름의 조정을 찾습니다. 조정을 클릭하여 엽니다.
3. 컴퓨터에서 파일을 추가하려면 업로더를 클릭하거나 이미지를 업로더로 드래그합니다. 이미지 검색을 클릭하여 이미지를 재사용하거나 스톡 이미지를 추가합니다.
4. 이미지의 스타일을 지정한 다음 저장을 클릭하여 변경 사항을 게시합니다.

Adirondack에서 조정은 다음과 같이 보입니다.

이미지 스타일 지정 및 자르기

배경 이미지를 추가한 후 이미지 업로더 아래의 옵션을 사용하여 이미지의 스타일을 지정하고 표시될 수 있는 잘림이나 왜곡을 수정하세요.

크기	자동 - 이미지가 원래 너비와 높이를 유지합니다. 반복하려는 작은 이미지에 적합합니다. 커버 - 배경 영역을 완전히 덮을 수 있도록 필요한 만큼 이미지 크기를 조정합니다(여백 없음). 결과적으로 전체 이미지가 표시되지 않을 수 있습니다. 이미지는 페이지 콘텐츠의 높이에 따라 각 페이지에서 다르게 보일 수 있습니다. 포함 - 이미지의 가장 긴 변(너비 또는 높이)이 브라우저 내부에 맞도록 크기를 조정합니다. 자동 또는 포함의 경우 사이트 배경 색상이 이미지 뒤에 표시될 수 있습니다. 이를 조정하려면 반복 조정을 사용하세요.
위치	배경 이미지의 위치를 설정합니다. 왼쪽 상단, 중앙 상단, 오른쪽 상단 왼쪽 가운데, 가운데, 오른쪽 가운데 왼쪽 하단, 중앙 하단, 오른쪽 하단
반복	크기가 자동 또는 포함으로 설정되어 있는지 확인하세요. 반복 없음 - 이미지를 한 번만 표시합니다. 반복 - 전체 배경을 덮도록 이미지를 반복합니다. 반복-X - 이미지를 가로 축에서만 반복합니다. 반복-Y - 이미지를 세로 축에서만 반복합니다. 반복 없음, 반복-X 및 반복-Y의 경우 위치 옵션을 사용하여 이미지가 표시되는 위치를 추가로 조정하세요.
위치 고정	선택하면 이미지의 위치가 스크롤되는 콘텐츠 뒤에 고정된 상태로 유지됩니다. 선택 해제하면 페이지와 함께 위아래로 스크롤됩니다. iOS를 포함한 많은 모바일 브라우저에서는 이 기능이 효과가 없으며, 이미지는 페이지와 함께 스크롤됩니다.

다른 사이트 영역 스타일 지정

배경 이미지가 얼마나 표시되는지는 다른 사이트 요소를 설정하는 방식에 따라 달라집니다. 스타일 옵션과 조정 이름은 템플릿마다 다르지만, 사이트 스타일을 사용하여 사이트의 다음 영역 중 일부 또는 전체에서 실험해 보세요.

• 메인 콘텐츠 영역(또는 "캔버스") 배경
• 머리말 배경
• 바닥글 배경
• 사이트 너비와 콘텐츠 너비

명심할 사항:

• 배경 이미지가 비쳐 보이도록 배경 색상을 부분적으로 불투명하게 설정할 수 있습니다.
• 배경 이미지가 로드되는 동안 배경 색상 또는 오버레이 색상이 표시될 수 있습니다.

모바일에서 사이트가 어떻게 보이는지 확인하세요

동일한 배경 이미지는 컴퓨터와 모바일 기기 모두에 표시됩니다. 효과를 테스트하려면 휴대폰을 가까이 두고, 컴퓨터에서 변경 사항을 저장한 후 휴대폰에서 사이트를 새로 고침하는 것이 좋습니다. 컴퓨터에서 편집하는 동안 빠르게 미리 보려면 기기 화면 보기를 사용하세요.

이미지가 모바일 기기의 길고 좁은 브라우저 화면에 맞춰 조정될 때 잘리거나 왜곡될 수 있습니다. 잘림을 최소화하기 위해 수행할 수 있는 몇 가지 방법이 있습니다.

• 배경 이미지를 선택할 때 이미지 모양은 모바일에서 표시되는 방식에 큰 차이를 줄 수 있습니다.
• 모바일에서 잘 작동하는 스타일 설정에 대한 문제 해결 팁을 참조하세요.

문제 해결

특정 페이지나 모바일에서 배경 이미지가 왜곡됩니다

이 문제는 배경 이미지가 브라우저 창의 길이를 덮기 위해 늘어날 때 발생합니다. 이는 일반적으로 다른 페이지보다 긴 블로그 페이지나 목록 보기로 설정된 이벤트 페이지, 그리고 페이지 콘텐츠가 세로로 쌓이는 모바일 페이지의 경우 특히 그렇습니다. 페이지 콘텐츠가 길수록 배경은 이를 완전히 덮기 위해 더 늘어나고, 더 확대되어 표시됩니다.

이 문제를 해결하려면 배경 이미지 조정을 열고(위의 3단계 참조) 다음 옵션 중 하나 또는 둘 다를 시도해 보세요.

• 위치 고정 확인(iOS를 포함한 일부 모바일 기기에는 영향을 미치지 않음)
• 크기: 포함 또는 크기: 자동 선택

위치 옵션을 실험하여 긴 페이지와 모바일 디스플레이에서 어떤 버전이 가장 크기가 잘 조정되는지 확인할 수도 있습니다.

이미지가 흐릿하거나 픽셀화되어 있습니다

이 문제는 이미지가 배경 영역을 채우기 위해 원래 크기를 넘어 늘어날 때 발생합니다.

여백 없음 이미지의 경우 대부분의 사이트에서 너비가 1500픽셀에서 2500픽셀 사이인 이미지를 업로드하는 것이 좋습니다.

참고: 가장 긴 변이 2500픽셀을 초과하는 배경 이미지는 업로드하지 않는 것이 좋습니다. 사이트 전체 배경 이미지는 항상 원본 이미지 크기로 로드됩니다. 배경 이미지 너비가 2500픽셀을 초과하는 경우 방문자에게 문제가 발생할 수 있습니다.

배경 이미지 및 사용자 지정 코드

사이트에 추가한 사용자 지정 코드가 배경 이미지 표시 방식에 지장을 줄 수 있습니다. 배경 이미지 관련 문제를 해결 중인 경우, 사용자 지정 코드를 일시적으로 비활성화하여 문제가 코드와 관련이 있는지 확인하세요. 자세히 알아보려면 사이트에 사용자 지정 코드 추가를 참조하세요.

모바일 디스플레이

다음은 스타일 조정을 사용하여 일반적인 모바일 디스플레이 문제를 해결하는 방법입니다. 모바일과 컴퓨터에 대한 개별 조정이 없으므로, 어떤 옵션이 가장 보기 좋은지 확인하기 위해 이러한 옵션을 실험해 보는 것이 좋습니다.

• 확대되거나 왜곡된 이미지 - 이미지를 크기: 포함 또는 크기: 자동으로 설정하세요. 가장 긴 변의 길이가 최대 2500픽셀인 더 큰 이미지를 업로드해야 할 수도 있습니다.
• 다른 페이지에서 배경 이미지 크기 변경 - 이미지를 크기: 포함 또는 크기: 자동으로 설정하세요.
• 이미지가 잘못 가운데 정렬됨 - 위치 옵션을 사용하여 페이지에서 이미지가 표시되는 위치를 조정하세요.
• 배경 이미지가 표시되지 않음 - 메인 콘텐츠 배경 색상이 이미지를 가리고 있을 수 있습니다. 투명도를 조절하여 배경 이미지를 드러내세요. (이는 컴퓨터 보기에도 영향을 미칩니다.) 원본 이미지는 가장 긴 변이 2500픽셀 미만이어야 하며, 더 큰 이미지는 표시되지 않을 수 있습니다. Aviator 그룹에서는 모바일 배경 이미지 조정이 선택되어 있는지 확인하세요.
• 이미지가 컨테이너 전체를 덮지 않음 - 크기: 자동 또는 크기: 포함 을 선택하고 이미지를 반복하여 빈 영역을 덮으세요.

예

배경 이미지 조정 옵션을 실험해 보며 배경 이미지에 가장 적합한 배치를 찾아보세요. 영감을 얻을 수 있도록 아래에 몇 가지 예를 포함했습니다.

다음은 Montauk 템플릿의 예입니다.

• 크기: 커버
• 고정된 위치
• 캔버스 배경 색상을 부분적으로 불투명하게 설정

다음은 Forte 템플릿의 예입니다.

• 크기: 자동
• 반복: 반복

다음은 Native 템플릿의 예입니다.

• 위치: 왼쪽 상단
• 크기: 자동, 반복-Y
• 사이트 배경 색상: 파란색

그리고 다음은 사이트 전체 및 정보 페이지별 배경을 보여주는 Aviator 템플릿입니다.

페이지별 배경 이미지 추가

한 페이지에만 배경 이미지를 만드는 방법에는 여러 가지가 있습니다.

• 배너 - 일부 템플릿은 페이지 상단에 표시되는 배너 이미지를 지원하며, 콘텐츠 오버레이를 지원할 수 있습니다. 예를 들어 Brine 그룹에서는 인트로 영역에 블록을 사용하여 배너에 다양한 유형의 콘텐츠를 추가할 수 있습니다.
• 커버 페이지 - 커버 페이지는 버전 7.0의 모든 템플릿에서 사용할 수 있으며, 텍스트, 버튼, 헤드라인, 로고 및 양식을 지원합니다. 자체 스타일 옵션이 있는 독립형 페이지를 만들고 사이트 머리말, 탐색 또는 바닥글을 표시하지 않습니다. 따라서 페이지를 돋보이게 하려는 경우 훌륭한 옵션입니다.
• 색인 페이지 섹션 - Brine과 Pacific 템플릿 그룹에서는 색인을 사용하여 레이아웃 페이지 섹션 뒤에 배경 이미지를 추가할 수 있습니다.