컨테이너 ②: 배경 색·이미지·영상

제목, 설명, 버튼을 묶어 둔 컨테이너를 페이지 배경과 구분해서 보여 주고 싶을 때가 있습니다. 컨테이너에는 단색, 그라데이션, 이미지, 영상을 배경으로 깔 수 있습니다. 이 글에서는 컨테이너의 배경을 정하는 위치와 방법을 순서대로 안내합니다. 컨테이너의 크기와 정렬은 별도 글에서 다룹니다.

1. 배경 설정은 어디에 있나요

컨테이너의 빈 곳을 눌러 선택하고, 오른쪽 위 점 세 개를 눌러 펼친 막대에서 톱니바퀴(요소 설정 열기)를 엽니다. 창 맨 아래의 전체 속성 패널 열기 (효과·반응형·HTML) →를 누르면 오른쪽 속성 패널의 콘텐츠 탭이 열리고, 내용 정렬 (자식 요소) 아래에 배경색, 배경 이미지, 배경 영상이 차례로 있습니다. 컨테이너 설정 창에도 같은 항목이 들어 있습니다.

2. 배경색: 없음, 단색, 그라데이션

배경색은 없음, 단색, 그라데이션 가운데 하나를 고릅니다. 단색을 누르면 색상 칸이 나타나는데, 색 코드(예: #EDE9FE)를 입력하거나 오른쪽 색상 상자로 고릅니다. 아래 투명도 슬라이더로 색을 얼마나 비치게 할지 정합니다. 배경은 컨테이너 안의 제목, 글, 버튼 뒤에 깔리므로 글자가 잘 보이는 색인지 화면에서 확인하며 고르세요. 누르는 즉시 편집 화면에 반영되고, 상단의 저장을 눌러야 페이지에 저장됩니다.

그라데이션을 누르면 아래에 하위 메뉴가 열립니다.

• 그라데이션 종류: 선형, 원형, 원뿔형 중에서 고르고, 반복 (줄무늬·동심원 패턴)을 켜면 같은 색 변화가 되풀이됩니다.
• 종류별 설정: 선형은 방향, 원형은 모양(원형·타원형)과 중심 위치, 원뿔형은 시작 각도와 중심 위치를 정합니다.
• 색상 1, 색상 2: 각각 색 코드와 투명도를 정하며, 색상 위치 막대의 동그라미를 끌어 두 색이 바뀌는 지점을 옮깁니다.

3. 배경 이미지 넣기

배경 이미지 선택 버튼을 누르면 이미지 관리 창이 열립니다. 미디어 저장소에서 사진을 고르거나 파일 업로드 탭에서 새로 올리면 곧바로 컨테이너 배경이 됩니다. 이 창의 탭별 사용법은 별도 글에서 다룹니다.

이미지가 들어가면 버튼 이름이 배경 이미지 변경으로 바뀌고, 아래에 세 가지 설정이 나타납니다.

• 배경 맞춤: 꽉 채우기는 컨테이너를 빈틈없이 덮고, 맞추기는 이미지 전체가 보이도록 줄입니다. 컨테이너가 더 넓으면 같은 이미지가 이어서 채워집니다. 원본 크기는 이미지를 원래 크기로 보여 줍니다.
• 배경 위치: 가운데, 위, 아래, 왼쪽, 오른쪽 중에서 이미지의 어느 부분을 보여 줄지 정합니다.
• 배경 이미지 제거: 이미지를 빼고 컨테이너를 원래대로 돌립니다.

이미지가 있는 상태에서 단색이나 그라데이션을 고르면 색이 이미지 위에 겹쳐집니다. 흰색 단색의 투명도를 낮추면 이미지가 옅어져 안의 글자가 더 잘 읽힙니다.

4. 배경 영상 넣기

배경 영상의 YouTube / Vimeo URL 칸에 영상 주소를 붙여 넣고 적용을 누르거나 Enter를 누릅니다. 올바른 주소가 아니면 YouTube 또는 Vimeo 주소를 정확히 입력해 달라는 안내 창이 나옵니다. 적용하면 적용됨: YouTube처럼 영상 종류와 번호가 표시되고, ▶ 재생과 ⏸ 정지 버튼, 그리고 영상 제거 버튼이 생깁니다. 편집 화면의 미리보기는 임시 재생이며 배포하면 자동 재생된다고 패널에 안내됩니다. 영상 위에 색을 얹고 싶을 때는 위의 배경색에서 조정합니다.

5. 이렇게 활용해 보세요

• 혜택 안내 컨테이너에 옅은 단색을 깔아 주변 내용과 구분할 수 있습니다.
• 사진 배경 위에 흰색 단색을 낮은 투명도로 겹쳐 제목과 설명을 읽기 쉽게 만들 수 있습니다.
• 컨테이너 높이를 먼저 정해 두면 배경 이미지의 맞춤과 위치 차이를 비교해 보기 쉽습니다.

6. 알아 두실 점

• 이 글의 화면은 데스크탑 편집 화면 기준이며, 배경은 상단의 저장을 눌러야 저장됩니다.
• 새로 올린 배경 이미지는 미디어 저장소에 남아서 다른 컨테이너나 페이지에서 다시 고를 수 있습니다.
• 영상 배경은 YouTube와 Vimeo 주소만 받습니다. 영상의 저작권과 이용 조건은 영상을 올린 곳의 규정을 확인해 주세요.

그라데이션의 세부 옵션과 컨테이너의 테두리·그림자·변형은 별도 글에서 이어서 다룹니다.