# 디스코URS 채널용 커스텀 배너

**URL:** https://meta.discourse.org/t/custom-banner-for-discourse-channel/176516
**Category:** Support
**Created:** [1월 19, 2021, 6:50오전 UTC](https://meta.discourse.org/t/custom-banner-for-discourse-channel/176516 "2021-01-19T06:50:10Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Dhruvi\_Butti](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dhruvi_butti/32/206479_2.png) [@Dhruvi\_Butti](https://meta.discourse.org/u/Dhruvi_Butti)
#### Post date: [1월 19, 2021, 6:50오전 UTC](https://meta.discourse.org/t/custom-banner-for-discourse-channel/176516/1 "2021-01-19T06:50:10Z")

</div>

안녕하세요! 자체 디스코스 채널을 설정 중인데, 헤더 아래에 다음과 같은 배너를 구현해야 합니다 -

 ![TaxQnA Banner (1)](https://global.discourse-cdn.com/meta/original/3X/7/9/7932d55326648c832645a3344b087d9b5db66de5.png)

하지만 두 가지 주요 문제에 직면해 있습니다.

1. 배너를 전체 너비로 표시할 수 없습니다. 디스코스가 컨테이너를 추가하여 해당 컴포넌트 전체가 컨테이너 안에 들어오게 됩니다.
2. 이미지가 DOM에 존재하더라도 보이지 않습니다. 이미지를 업로드하고 다음과 같이 사용했는데 작동하지 않습니다 - `background-image: url($discourse_vector); background-position: bottom; background-size: cover; height: 100%; display: block; width: 100%;`

도움을 주시면 감사하겠습니다.  
미리 감사합니다.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [1월 19, 2021, 8:43오후 UTC](https://meta.discourse.org/t/custom-banner-for-discourse-channel/176516/2 "2021-01-19T20:43:49Z")

</div>

테마의 head 파일에 다음 내용을 추가할 수 있습니다:

```xml
<script type="text/x-handlebars" data-template-name="/connectors/below-site-header/custom-banner">

// 여기에 사용자 정의 HTML을 입력하세요

</script>

```

이것은 플러그인 아웃렛을 활용하여 콘텐츠를 헤더 바로 아래에, 그리고 콘텐츠 컨테이너 외부에 배치합니다(자세한 내용은 여기: [Discourse 테마 개발자 가이드](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648))

> [@Dhruvi\_Butti](#):
>
> 해당 이미지들을 업로드하고 `background-image: url($discourse_vector);`로 사용했습니다.

변수 이름으로 보아… 이것은 SVG 이미지인가요? 그렇다면 SVG 파일의 마크업에 viewbox 및/또는 차원이 포함되어 있는지 확인해야 할 수 있습니다… 가끔 이런 문제에 부딪히곤 합니다.

그렇지 않다면 이미지가 표시되어야 할 것 같은데… 이것은 라이브 사이트에서 발생하는 건가요, 아니면 로컬 개발 환경에서인가요? 개발 환경에서 업로드된 이미지 관련 문제를 겪은 적이 있는데, 보통 캐시를 지우거나 서버를 재시작하면 해결됩니다.
