> 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. 스크롤을 하여 이미지 고정을 확인합니다.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.qshop.ai/customer_support/guide/tip/parallax.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.