[티스토리] 배경화면 변경하는 법

티스토리 블로그의 스킨 배경화면을 변경하는 방법입니다.

아무 사진이나 올릴 수 없기 때문에 다운로드, 수정, 배포가 자유인 무료 이미지를 사용해야 합니다.

저는 아래의 사이트를 추천합니다.

https://pixabay.com/ko/

사진을 다운 받았다면 이제 스킨편집을 시작합니다.

1. 배경 사진 업로드

사용하고자 하는 이미지 다운로드 한 후, 이미지를 블로그에 업로드 합니다.

업로드하는 방법은 티스토리 관리자 페이지에서 블로그 관리 → 꾸미기 → 스킨편집 → html편집 → 파일업로드 순으로 들어가시면 됩니다.

이때, 사용하고자 하는 사진파일 이름은 간단한 영문자로 적는게 좋습니다.

2. 배경 이미지 주소 연결하기

CSS 편집창에서 이미지 주소를 적어야 합니다. 다음과 같은 순서로 합니다.

1. Ctrl+F(찾기)로 body를 찾습니다.

2. body 괄호안에 아래의 코드를 붙여넣습니다.

3. 이때, 배경화면 파일명.jpg을 자신이 올린 파일명으로 바꾼 후 붙여넣습니다.

background-color: #fff;
background-image: url('./images/배경화면파일명.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;

body 배경화면.txt

잘 따라하셨다면 완성입니다.

응용으로 body 영역 이외에도 자신이 원하는 영역에 배경을 설정할수 있습니다.

기존 스킨을 백업 후 작업하기시 바랍니다.

---

CSS 배경관련 명령어 설명

1. background-image: url(이미지주소);

2. background-size:

A. auto; 원본 크기

B. 100px; 픽셀크기 지정

C. 50%; 비율 지정

D. contain; 가로 세로 비율 유지, 이미지 중심으로 늘려준다 (화면 크기에 따라서 배경화면이 잘리거나 빈 공간이 생길 수 있습니다.)

E. cover; 가로 세로 비율 유지, 요소 중심으로 커진다

3. background-repeat:

A. repeat; 반복 채움

B. no-repeat; 반복 없이 하나만

C. repeat-x; 가로만 반복

D. repeat-y; 세로만 반복

4. background-attachment:

A. scroll; 스크롤을 움직임에 맞춰서 배경이 위로올라가거나 아래로 내려간다

B. fixed; 배경이 고정됨 (스크롤을 움직여도 배경만 그대로)

5. background-position : center / left / right / top / bottom;

A. 0% 0%; 좌측상단

B. 100% 100%; 우측하단