티스토리 스킨 배경이미지 변경

1. 스킨 적용하기

블로그관리 > 꾸미기 > 스킨변경 메뉴에 들어가면 다양한 스킨목록들이 있고 그 중에 맘에 드는 것을 하나 선택해서 적용한다.
원하는 스킨을 클릭하면 '미리보기' 도 해볼 수 있고 '적용' 을 클릭하면 변경 완료!


'스킨목록' 이라는 타이틀 오른쪽에 '스킨등록+' 메뉴를 통해 직접 만든 스킨을 등록해서 적용할 수도 있고
http://tistory.com/skin 에서 많은 사람들이 공유하고 있는 스킨을 적용해도 좋다.

2. 기본 배경 이미지

기본 이미지 배경은 그뤠잇!
내가 선택한 스킨의 기본배경 이미지는 어느 유럽의 성 사진인데 앞에 꽃들과 뒤 성 배경이 너무 이쁘다


반응형 스킨이라 노트북으로 보면 왼쪽에 세로로 이미지가 보이고
태블릿 정도의 크기로 화면이 작아지면 위에 헤더쪽에 가로 이미지로 보인다.

3. 내가 원하는 거로 배경 이미지 변경하기

그래도 다 똑같으면 재미없으니까 이 이미지를 내가 원하는 거로 바꿔보고 싶어진다.
그럼 우선 원하는 이미지를 겟 하는 것 부터!

3.1 무료 이미지 고르기

사진엔 저작권이 있다!
고로 내가 직접 찍은 사진이거나 무료로 사용할 수 있는 이미지를 사용해야한다.
내가 찍을 껄 쓸 정도의 사진 찍는 실력이 아니므로 바로 이미지 검색


무료 이미지를 검색하고 다운 받을 수 있는 사이트 들이 많다.


이것저것 둘러보다가 http://www.freeqration.com 에서 아래 두 이미지를 선택했다.
이 중 아래 책상과 의자 이미지를 적용해보자.

3.2 파일 올리기

다시 티스토리의 블로그관리 로 돌아오자.
블로그관리 > 꾸미기 > HTML/CSS 편집 을 클릭하면 다음과 같은 창이 뜬다.
화면이 2분할 되면서 오른쪽에 상단에 HTML.CSS.파일업로드 메뉴가 생겼다.
여기서 파일업로드 메뉴를 눌러서 아까 고른 배경이미지를 업로드 한다.


그러면 기본 배경 이미지 처럼
내가 올린 이미지도 cdn 이미지 경로가 생긴다. 다음과 같이..
https://tistory2.daumcdn.net/tistory/2853886/skin/images/header3.jpg
이 경로의 앞부분은 티스토리 블로그 에서 알아서 부여하는 거고 뒤에 'images/header3.jpg' 만 알고 있으면 된다.

3.3 css 수정하기

이미지파일을 업로드 한 다음에 왼쪽 'CSS' 메뉴로 오자.
CSS가 뭐고 어떤 내용인지 자세히는 나중기회에~~


개발 언어 같은 영어 텍스트가 잔뜩 있다.
여기서 'background-image'를 검색해보자
그럼 url(images/header-default.jpg) 로 되어있는 부분을 찾을 수 있다.
어? URL? 그 URL?
맞다. 이미지 경로이다.
이 부부을 아까 내가 파일업로드 해서 생긴 이미지 경로로 바꿔주는 거다.
위에서 기억하면 된다고 했던 'images/header3.jpg' 로 바꿔주면 된다! 그런 다음 저장! 끝!
왼쪽에 바로 적용된 모습을 확인 할 수 있다.

추가로. 왼쪽 사이드에 적용 된 모습!
이미지가 큰데 가운데 의자 보이게 딱! 이쁘다~

출처 : https://ariong88.tistory.com/3