배경 고정하기
배경 고정 방법에 대해 알아봅니다.
Last updated
배경 고정 방법에 대해 알아봅니다.
Last updated
배경 고정은 섹션 또는 블록 배경 이미지가 스크롤을 하더라도 이미지가 배경에 고정이 되어 보이게 됩니다.
사이트 디자인에 시각적인 효과를 줄 수 있으며 이미지 중심의 페이지 디자인에 효과적으로 사용할 수 있습니다. 뿐만 아니라 이미지 블록에 적용이 된 이미지 고정하여, 다양한 형태의 디자인 구성을 할 수 있습니다.
섹션 배경 전체를 가득 채워 적용이 되기때문에 충분히 큰 해상도의 이미지 사용을 권장 드립니다.
PC 기준 1920px
모바일 기준 768px
섹션배경에 이미지를 고정하여 다양한 형태의 디자인 구현을 할 수 있습니다.
1-1. 큐샵 로그인 후 에디터에 접속합니다. (에디터 접속하기)
1-2. 왼쪽 추가패널을 통해 섹션을 추가합니다. (섹션 추가하기)
1-3. 오른쪽 속성 패널을 통해 섹션 배경에 이미지를 등록합니다. (속성 패널 가이드)
1-4. 설정창 아래 [배경 고정] 토글을 활성화 합니다.
1-5. (선택사항) 배경 고정을 가장 첫 섹션에 사용하는 경우 이미지 미리보기를 통해 배경 이미지가 적용이 될 기준 위치를 설정합니다.
1-4. 스크롤을 하여 배경 고정을 확인합니다.
블록 배경에 이미지를 고정하여 다양한 형태의 디자인을 구현할 수 있습니다.
블록의 색상, 콘텐츠 내용에 따라 적용한 배경 이미지가 보이지 않을 수가 있습니다.
2-1. 큐샵 로그인 후 에디터에 접속합니다. (에디터 접속하기)
2-2. 왼쪽 추가패널을 통해 블록을 추가합니다. (블록 추가하기)
2-3. 오른쪽 속성 패널을 통해 블록 배경에 이미지를 등록합니다. (속성패널 가이드)
2-4. 설정창 아래 [배경 고정] 토글을 활성화 합니다.
2-5. (선택사항) 블록의 색상, 콘텐츠에 따라 배경이 보이지 않을 경우 각 블록의 불투명도 조절을 하여, 배경 이미지가 보이도록 조정합니다.
아래 이미지는 도형 블록의 예시이며, 각 블록의 설정 방법은[추가패널] 가이드를 참고 부탁드립니다.
2-6. 스크롤을 하여 배경 고정을 확인합니다.
3-1. 큐샵 로그인 후 에디터에 접속합니다. (에디터 접속하기)
3-2. 왼쪽 추가패널을 통해 이미지 블록을 추가합니다. (블록 추가하기)
3-3. 이미지 블록의 상세설정에 들어가 이미지를 추가합니다.(이미지 블록)
3-4. 이미지 블록 상세설정의 [배경고정] 토글을 활성화 합니다.
3-5. 스크롤을 하여 이미지 고정을 확인합니다.
