티스토리 꾸미기 배경이미지 삽입하기

요즘 바빠서 티스토리 포스팅을 전혀 못하고 있는데요. 카톡창으로 스킨을 쓸 수 없냐고 문의를 주신분이 계십니다. 제 스킨을 공개하라면 그대로 공개를 할 수도 있는데, 문제는 최적화가 전혀 안되어 있어서 오히려 독이 될듯해서 공개를 못해드리는 상태입니다.

왜냐하면, 제가 스킨에 이것저것 테스트를 하면서 잔존코드가 남아있고, 스크립트 정리가 안되어 있어서 로딩이 다른 스킨들 보다 느린감이 있어요. 그래서 함부로 공개를 못해드릴것 같아요. 기본 Readiz 님 스킨과는 차이는 별로 안나기에 그것정도만알려드려도 충분히 잘 바꾸실 것 같아서 관련 포스팅을 하게 되었습니다.

시리즈물로서 배경이미지를 삽입하는 방법에 대해서 알려드릴께요.

 

 

2017/10/31 - [블로그/꾸미기노하우] - 티스토리 서식이 안보일때

2017/10/30 - [블로그/운영노하우] - 티스토리 공감버튼 이동시키기

2017/10/26 - [블로그/운영노하우] - 구글 상위노출을 위한 모바일 친화성 테스트

2017/10/25 - [블로그/수익노하우] - 애드센스 입금 안됨 어떻게 해결할까?

2017/10/11 - [블로그/수익노하우] - 애드센스 모바일 상단 확인해보세요

2017/10/10 - [블로그/꾸미기노하우] - 티스토리 스킨 상단 버튼 없애기(by fastboot)

 

 

티스토리 꾸미기 배경이미지 삽입하기

우선, 배경을 삽입하는 방법에 대해서 알려드리겠습니다. 제 티스토리에는 배경이미지가 삽입이 되어 있는데요. 패턴 형식으로서 동일한 이미지가 반복되는 형대로 되어 있는 상태입니다. 큰 이미지 1장이 아니라 조그만한 이미지가 반복되는 형식이에요. 그래서 용량도 별로 안들고 효과는 깔끔하게 적용이 됩니다.

패턴이미지를 적용시키기 위해서는 패턴을 먼저 구하셔야 합니다. 패턴이 아니더래도 가능은 하지만 제일 깔끔하게 보이는게 패턴으로 지정하는게 제일 깔끔할듯 합니다.

 

구글에서 패턴이미지 로만 검색해도 잔뜩 나오는군요.

 

 

 

 

 

패턴을 구하셨으면 이제 배경에 삽입을 해줘야 겠죠? fastBoot의 경우 body 태그안에 배경을 삽입하면 알아서 배경에 깔리게 됩니다.  CSS영역에 있는 BODY라는 태그를 찾아서 아래처럼 소스를 변경해주시면 간단하게 배경이 적용이 됩니다. 이방법의 경우 문제점은 사이즈가 안맞는 크기의 배경이 들어가게 된다면 화면배치가 이상하게 보일 수 있다는 점인데, 아예 크기를 큰이미지를 넣으셔서 극복을 하시는 분들이 계신데요.

 

 

  

 

만약 이미지 사이즈가 너무 큰 배경을 선택하신다면 로딩에 문제가 생기니 적당히 압축을 해서 용량을 줄이시기 바랍니다. 개인적으로는 배경이미지로 100kbyte도 엄청 많다고 생각이 드네요. 

 

다음으로 메인화면에서 HTML/CSS편집메뉴로 들어가주세요.

 

 

여기설정에서 CSS메뉴탭을 선택하셔서 아래 부분을 찾아주셔야 됩니다. 꼭 fastBoot가 아니더래도 모든 스킨은 body 라는 태그를 무조건 가지고 있습니다.

 

 

 

 

body 태그의 속성이 만약 없다고 하면 아래처럼 그대로 적용을 해주셔도 됩니다.

 

 

body {
  background-color:rgb(241, 242, 246);
  background-image:url('images/background.png');
  overflow-x:hidden;
}

 

 

소스파일 다운로드 배경이미지소스.txt

 

 

다음작업으로 배경에 쓰일 이미지를 업로드해주시기 바랍니다. 티스토리 스킨편집기에서 우측 파일업로드 기능을 이용해서 업로드 해주세요. 이미지의 경우 업로드만 하셔도 기본적으로 images 폴더로 들어가게 됩니다.

 

 

이렇게 넣어주시면 간단하게 배경 적용이 됩니다. 패턴의 경우 가장 간단하게 적용시킬 수 있으며, 그에 따른 옵션에 대해서 간단하게 설명을 드릴께요.

 

background-color : rgb(241, 242, 246);

 

이미지가 로드가 안됐을경우 배경기본 색상입니다. rgb코드라고 하며, 숫자에 따라서 이미지 색상이 결정됩니다. 이것외에도 white, red, blue등 알고 계시는 기본 단어를 사용하셔도 되며, #FFFFFF 형식의 색상번호도 사용하실 수 있습니다.

 

두번째로 background-image 속성인데요. images/background.png 파일을 읽고 있는것을 확인하실 수 있습니다. 여기까지가 간단하게 배경이미지를 삽입하는 방법입니다. 여기까지 수고하셨어요