> For the complete documentation index, see [llms.txt](https://help.qshop.ai/customer_support/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.qshop.ai/customer_support/guide/tip/parallax.md).

# 배경 고정하기

배경 고정 방법에 대해 알아봅니다.

## 배경 고정이란?

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FwsU0GvdXoMZmRncEOdUH%2F%EB%B0%B0%EA%B2%BD%20%EA%B3%A0%EC%A0%952.gif?alt=media&amp;token=899a55c8-d3ab-42f2-a24c-d030299c59fd" alt=""><figcaption></figcaption></figure>

배경 고정은 섹션 또는 블록 배경 이미지가 스크롤을 하더라도 이미지가 배경에 고정이 되어 보이게 됩니다.

사이트 디자인에 시각적인 효과를 줄 수 있으며 이미지 중심의 페이지 디자인에 효과적으로 사용할 수 있습니다. 뿐만 아니라 이미지 블록에 적용이 된 이미지 고정하여, 다양한 형태의 디자인 구성을 할 수 있습니다.

{% hint style="info" %}
섹션 배경 전체를 가득 채워 적용이 되기때문에 충분히 큰 해상도의 이미지 사용을 권장 드립니다.&#x20;

* PC 기준 1920px&#x20;
* 모바일 기준 768px
  {% endhint %}

### 1. 섹션배경 고정하기

섹션배경에 이미지를 고정하여 다양한 형태의 디자인 구현을 할 수 있습니다.

1-1. 큐샵 로그인 후 에디터에 접속합니다. ([에디터 접속하기](/customer_support/guide/design.md#undefined-1))

1-2. 왼쪽 추가패널을 통해 섹션을 추가합니다. ([섹션 추가하기](/customer_support/guide/design/editor/contents.md#id-1))

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FQCbydbpjFkySiTImwyqX%2F1_%EB%B0%B0%EA%B2%BD%EA%B3%A0%EC%A0%95_%EC%84%B9%EC%85%98%EC%B6%94%EA%B0%80.png?alt=media&amp;token=8ad8c3a7-5d8d-45d2-a0c6-67af9daf010a" alt=""><figcaption></figcaption></figure>

1-3. 오른쪽 속성 패널을 통해 섹션 배경에 이미지를 등록합니다. ([속성 패널 가이드](/customer_support/guide/design/editor/rnb.md))

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F3mmPHvXqEgezEmMphiB0%2F2_%EB%B0%B0%EA%B2%BD%EA%B3%A0%EC%A0%95_%EC%84%B9%EC%85%98%20%EB%B0%B0%EA%B2%BD%20%EC%9D%B4%EB%AF%B8%EC%A7%80.png?alt=media&amp;token=8528626e-3f5c-497a-9288-aaaf60e627d9" alt=""><figcaption></figcaption></figure>

1-4. 설정창 아래 **\[배경 고정]** 토글을 활성화 합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F3hk5I7BSQZXCPJxhhvyi%2F3_%EB%B0%B0%EA%B2%BD%EA%B3%A0%EC%A0%95_%EC%84%B9%EC%85%98%20%EB%B0%B0%EA%B2%BD%20%EA%B3%A0%EC%A0%95%EC%84%A4%EC%A0%95.png?alt=media&amp;token=c2580d7e-bf4a-4f84-a167-cedd4364690d" alt=""><figcaption></figcaption></figure>

1-5. (선택사항) 배경 고정을 가장 첫 섹션에 사용하는 경우 이미지 미리보기를 통해 배경 이미지가 \
적용이 될 기준 위치를 설정합니다.&#x20;

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FMTLfYsykDmDy8JqOTFLa%2F4_%EB%B0%B0%EA%B2%BD%EA%B3%A0%EC%A0%95_%EC%84%B9%EC%85%98%20%EB%B0%B0%EA%B2%BD%20%EC%9D%B4%EB%AF%B8%EC%A7%80%20%EC%9C%84%EC%B9%98.png?alt=media&amp;token=874ce18e-e750-40cd-b6cc-b4801e7ac36a" alt=""><figcaption></figcaption></figure>

1-6. 스크롤을 하여 배경 고정을 확인합니다.

### 2. 스크롤시 배경확대하기

스크롤 시 섹션 배경 이미지가 확대되는 효과를 설정할 수 있습니다.

{% hint style="warning" %}
이 효과는 PC에서만 지원됩니다.
{% endhint %}

2-1. 큐샵 로그인 후 에디터에 접속합니다. ([에디터 접속하기](/customer_support/guide/design.md#undefined-1))

2-2. 섹션 배경 이미지를 등록 후, **\[배경 고정]**&#xACFC; **\[스크롤시 배경확대]** 토글을 활성화합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FUQyR3PLB5kNIIHjfNkft%2Fimage.png?alt=media&amp;token=cf7ae045-b721-4eed-aa82-4cac6bd076ce" alt=""><figcaption></figcaption></figure>

2-3. 게시된 사이트에서 스크롤하여 확인합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FCOK31Qk4n8IMxERyQCEJ%2FUntitled.gif?alt=media&amp;token=2639196f-02f2-4df4-9e94-f8db679d0d79" alt=""><figcaption></figcaption></figure>

### 3. 블록 배경 고정하기

블록 배경에 이미지를 고정하여 다양한 형태의 디자인을 구현할 수 있습니다.

{% hint style="danger" %}
블록의 색상, 콘텐츠 내용에 따라 적용한 배경 이미지가 보이지 않을 수 있습니다.
{% endhint %}

3-1. 큐샵 로그인 후 에디터에 접속합니다. ([에디터 접속하기](/customer_support/guide/design.md#undefined-1))

3-2. 왼쪽 추가패널을 통해 블록을 추가합니다. ([블록 추가하기](/customer_support/guide/design/editor/contents.md#id-1-1))

3-3. 오른쪽 속성 패널을 통해 블록 배경에 이미지를 등록합니다. ([속성패널 가이드](/customer_support/guide/design/editor/rnb.md))&#x20;

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FJBn0MLo1hmBeke2qdnO5%2F5_%EB%B0%B0%EA%B2%BD%EA%B3%A0%EC%A0%95_%EB%B8%94%EB%A1%9D%20%EB%B0%B0%EA%B2%BD%20%EC%9D%B4%EB%AF%B8%EC%A7%80.png?alt=media&amp;token=8d27e559-6061-4ec9-bfcf-0c4e126cab61" alt=""><figcaption></figcaption></figure>

3-4. 설정창 아래 **\[배경 고정]** 토글을 활성화 합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2Ftf6X9tsspDg0V9Q474st%2F6_%EB%B0%B0%EA%B2%BD%EA%B3%A0%EC%A0%95_%EB%B8%94%EB%A1%9D%20%EB%B0%B0%EA%B2%BD%20%EA%B3%A0%EC%A0%95%EC%84%A4%EC%A0%95.png?alt=media&amp;token=820152ee-5df1-48f5-b0a1-498c425acddf" alt=""><figcaption></figcaption></figure>

3-5. (선택사항) 블록의 색상, 콘텐츠에 따라 배경이 보이지 않을 경우 각 블록의 불투명도 조절을 하여, \
배경 이미지가 보이도록 조정합니다.

{% hint style="info" %}
아래 이미지는 도형 블록의 예시이며, 각 블록의 설정 방법은\[[추가패널](/customer_support/guide/design/editor/contents.md)] 가이드를 참고 부탁드립니다.
{% endhint %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FHB6QLWMHB3hNK0qWvc3e%2F7_%EB%B0%B0%EA%B2%BD%EA%B3%A0%EC%A0%95_%EB%B8%94%EB%A1%9D%20%EB%B0%B0%EA%B2%BD%20%EB%B6%88%ED%88%AC%EB%AA%85%EB%8F%84.png?alt=media&amp;token=a3aff982-aeaf-4fac-aba1-176d2c524bd5" alt=""><figcaption></figcaption></figure>

3-6. 스크롤을 하여 배경 고정을 확인합니다.

### 4. 이미지 블록 고정하기

4-1. 큐샵 로그인 후 에디터에 접속합니다. ([에디터 접속하기](/customer_support/guide/design.md#undefined-1))

4-2. 왼쪽 추가패널을 통해 이미지 블록을 추가합니다. ([블록 추가하기](/customer_support/guide/design/editor/contents.md#id-1-1))

4-3. 이미지 블록의 상세설정에 들어가 이미지를 추가합니다.([이미지 블록](/customer_support/guide/design/editor/contents/media.md#id-1))

4-4. 이미지 블록 상세설정의 **\[배경고정]** 토글을 활성화 합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FzaCR4dEDbtVOIzxLUyJT%2F8_%EB%B0%B0%EA%B2%BD%EA%B3%A0%EC%A0%95_%EC%9D%B4%EB%AF%B8%EC%A7%80%20%EB%B8%94%EB%A1%9D.png?alt=media&amp;token=366ea8dc-0222-401a-8d58-43f6c959d2f0" alt=""><figcaption></figcaption></figure>

4-5. 스크롤을 하여 이미지 고정을 확인합니다.