비주얼 및 일반 섹션에 배경 이미지가 나타나지 않을 때

  아임웹 연구소 소장 해준  |  2018 . 01 . 15

시작에 앞서
보다 차별적인 홈페이지 디자인을 위해 우리는 '비주얼 섹션' 및 '일반 섹션' 배경에, 이미지나 동영상을 추가합니다. 그런데 배경에 이미지를 넣어도 어째서인지 아래 그림처럼 아무런 표시가 나타나지 않을 때가 있습니다.

배경이미지를 분명 넣었음에도 말이죠!

원인은 섹션을 꾸미는 과정에서 '배경색'이 추가되었기 때문입니다.




섹션은 배경이미지 위에 배경색이 깔리고, 그 위에 텍스트나 이미지 같은 각종 위젯들이 쌓이는 레이어 형식로 구성됩니다. 아래 그림은 흰색이 아래 배경이미지를 가리고 있었습니다. 그러니 아무리 배경이미지를 바꿔도 하얗게 표시 되었던 거죠.

이번 강좌에서는 섹션에 적용된 배경색 투명도를 조절해, 다시금 배경 이미지가 보이도록 설정하는 방법을 알아보겠습니다.




1단계, 섹션 설정 창 열기
편집하려는 섹션 내 마우스 커서를 놓고, 마우스 우클릭하면 나타나는 보조 메뉴에서 [섹션 설정]을 클릭합니다.






2단계, 배경색 확인하기
섹션 설정 창 배경 항목에서 [배경색]이 들어갔는지 확인해주세요. 아래 그림을 보시면 흰색 배경색이 적용된 것을 확인할 수 있습니다.






3단계, 배경색 컬러 팔레트 열기
아래 그림을 참조해, 배경색 컬러 팔레트를 열어주세요.






4단계, 배경색 투명도 조절하기
현재 흰색으로 적용된 배경색의 투명도를 조절해주세요. 아래 그림을 보시면, 색상 바(Bar) 하단에 투명도 조절 바(Bar)가 위치한 걸 확인할 수 있습니다. 우측으로 끌면 완전 투명도가 100%가 되어 배경색이 사라지고 그 아래 위치했던 이미지가 나타납니다.

*투명도를 막대(Bar)의 중간쯤에 위치시키면, 배경 이미지와 배경색이 겹치는 효과를 낼 수 있습니다.






5단계, 비주얼 섹션 배경색 투명하게 바꾸기
비주얼 섹션 내 배경 이미지가 보이지 않을 때도 같은 방법으로 배경색을 확인 후 투명하게 변경할 수 있습니다. 먼저 비주얼 설정 창을 열고, 아래 그림을 참조해 편집해주세요. :)

1) 비주얼 설정 창을 열고 [디자인] 탭 메뉴로 이동합니다.
2) 배경 항목에 [배경색] 컬러 팔레트를 클릭합니다.
3) 투명 막대 바(Bar)를 잘 조절해서 투명도를 조절해주세요.



해준
배우고 익히고 나누는 | 해준씨 | 유용한 콘텐츠 마케팅 | 네이버 카페 '아임웹 연구소' 소장
jin@haejoon.com

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버페이, KCP 공식파트너입니다.