본문 바로가기

-TIP-/* 컴퓨터

티스토리 덧글 창에 배경이미지 넣는 방법




<연관검색어>

티스토리 덧글 창에 이미지 넣기, 티스토리 덧글 창, 티스토리 덧글에 배경 넣기,
티스토리 덧글 창에 배경 넣기, textarea, 티스토리, 티스토리 덧글, 티스토리 배경이미지 넣는 법,
티스토리 덧글 창 이미지 넣는 법, 티스토리 덧글에 이미지 넣는 법,
티스토리 덧글에 사진 넣는 법, 티스토리 덧글에 배경사진 넣기
티스토리 방명록 배경 넣기, 티스토리 배경 이미지 넣기, 티스토리 배경,
티스토리 배경 이미지, 티스토리 덧글배경 이미지, 티스토리 방명록배경 이미지,
티스토리 방명록 창에 배경 넣기

 





댓글을 보다 보면 이렇게 배경에 사진들이 붙어있는 것을 보게 된다.

그렇다면, 이렇게 댓글 배경사진은 어떻게 하는 것일까?

.
.

[ 순서 ]

1. 이미지(그림) 준비

- 댓글 창의 크기에 맞춰서 이미지를 만들거나 혹은 구한다.


2. 이미지 올리기(업로드)

- 이미지를 준비 하였으면 관리자>HTML/CSS 편집>파일업로드 를 선택하여 파일을 업로드 한다.

      

 



업로드를 하면 자동적으로 ./images/파일이름.jpg 으로 저장된다.


3. skin.html 수정

- 파일을 올리셨으면 다시 HTML/CSS 편집으로 돌아와서
단어 찾기(Ctrl + F)를 이용하여 rp_input_comment 를 찾는다.


<수정 전>
<textarea name="[ ##_rp_input_comment_## ]" rows="5" cols="50">
</textarea>

 

 


<수정 후>
<textarea style="background-image:url(./images/파일이름.jpg);background-repeat:no-repeat; background-position:right" name="[ ##_rp_input_comment_## ]" rows="5" cols="50">
</textarea>

파란색 부분이 미리 올려놓은 파일을 댓글 창의 배경으로 표시하는 부분입니다.

일일이 타자치기 귀찮으시거나 어려우신 분들을 위해 파일도 올려두었습니다 ^^

 

before.txt -> 수정 전
after.txt - > 수정 후

background-position: right -> 이미지를 오른쪽으로 표시하는 옵션
(P.S 저는 이미지 크기를 다 댓글 창에다 맞춰서 굳이 이것은 사용하지 않았습니다.)

background-repeat: no-repeat -> 배경이미지가 반복되지 않고 한 번만 표시되도록 하는 옵션


4. 완료 및 수정

- 위와 같이 수정을 했으면 이제 미리보기를 눌러서 완성 되었는지 확인한다.
정상적으로 나오면 저장하기, 만약 정상적으로 나오지 않으면
태그 문제가 98%, 파일 문제가 2%이므로 확인하시기를 바랍니다.


(※ 응용을 하면 방명록 배경 창도 꾸밀 수 있습니다 !) 
 

관련글 - [-노하우/자료-/* IT/컴퓨터] - 티스토리 방명록 창에 배경이미지 넣는 방법