> 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="/files/X0gcENadVwVATxzlqACw" 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="/files/tMv2gNiV7V7lUB5RLbyb" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/thNB2ayCtPAOnf7mcTtm" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/LJ8QxX3Ys5C7d1ZCjfpP" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/WFsnVxxUZO8cLyzLOuIv" 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="/files/7O9DgahKUcnbaDf6IQ2k" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/qumvTFDJawb4shdwt0Ac" 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="/files/HkQZFYV8Q1JCZkNYq48k" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/61Mr6BJxBTyQmSND7xVI" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/f1bUecTMvY4OY4VdgZZQ" 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="/files/p773N0byGVZGcvVzithc" alt=""><figcaption></figcaption></figure>

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