티스토리헤더에 전체 이미지 넣는 방법

티스토리헤더에 전체 이미지 넣는 방법

처음 티스토리를 사용하게되면 , 

로고 부분의 이미지만을 교체하기 쉽게 되어있습니다.

그러나, 이 기능을 익히고 나면,

헤더/상단전체의 이미지를 바꾸고 싶어집니다. 

<헤더란?>

<티스토리 헤더 로고이미지만 바꾸기>

<티스토리 헤더 세로폭 조정하기>

기존모습입니다. 메뉴 위의 헤더에 별도 이미지가 없이, 배경색(연두색) 으로 채워져 있습니다.

티스토리 헤더 전체 이미지 바꾸는 법 소개합니다.

적용한 스킨의 전체 헤더사이즈를 알아냅니다. 

저는 1354 x 398 사이즈로 만들어 놓았습니다.

( 하단에 있는, 메뉴이미지는 , 추후 메뉴 고치는 법을 통해 다시 알려드리도록 하겠습니다 ) 

일단, 이 메뉴 이미지가 보이지 않도록, 높이를  , 398이 아닌, 200정도로 할 예정입니다. 

그사이즈에 맞추어 , 헤더 이미지 제작을 합니다. 

포토샵이 없는경우, 포토스케이프에서 작업하시면 됩니다 무료입니다.

< 무료 포토스케이프 다운받기 >

관리 > html/css 편집메뉴로 가셔서 > 아래 표시 를 찾아줍니다.

background-image 부분 다음용어 / 다음 코딩/ 다음 html이 , 

주석처리 /*   */ 되어있음을 아실겁니다.

*참고로,  <!-- xxxx --> 표시는 , 편집기에서만 보이는 일종의 주석처리 입니다.

웹상에서는 보이지 않고, 편집기에서 찾기 쉽도록 표시만 해 놓은것입니다.

제 스킨이 , 별도 이미지가 아니라, 배경색상으로 지정되어있어, 이미지가 들어가지 않아서 입니다. 

여러분들은 조금 다르게 들어가 있을수 있습니다.

-----

/* 해더 */

#header {

height:/*@title-height*/66px/*@*/; /*기존66-->398 ,헤더부분 타이틀 공간높이*/

background-color:/*@title-background-color*/#B71517 /*@*/; /*기존빨강B71517-->녹색53d50d*/

background-image: /*@title-background-image*/ /*@*/;

background-repeat:/*@title-background-image-repeat*/ /*@*/;

background-position:/*@title-background-image-position*/ /*@*/;

}

#header h1 {

float:left;

margin-top:27px;

margin-left:5px;

}

---- 

이미지를 넣으시거나 대체하시기 위해, 

화일명을 , 주석처리 안에 있는,   

title-background-image.png 로 저장해 주시고, 

파일업로드를 하신후, 

빨갛게 색칠한 부분에 아래와 같이 입력해 주시면 됩니다.

--------

0000.jpg 로 되어있는 이름대신, 

내가 저장한 이름으로 적어주심 됩니다.

저는 그대로 /title-background-image.png로 하였습니다.

background-image 다음에, 

url(images/title-background-image.png) 를 추가해줍니다.

/* 해더 */

#header {

height:/*@title-height*/66px/*@*/; /*기존66-->398 ,헤더부분 타이틀 공간높이*/

background-color:/*@title-background-color*/#B71517 /*@*/; /*기존빨강B71517-->녹색53d50d*/

background-image: url(images/title-background-image.png)/*@title-background-image*/ /*@*/;

background-repeat:/*@title-background-image-repeat*/ /*@*/;

background-position:/*@title-background-image-position*/ /*@*/;

}

#header h1 {

float:left;

margin-top:27px;

margin-left:5px;

}

---

최종변경된 모습입니다. 

제가 원하는 패턴이미지로 대체했습니다.

이상 티스토리 헤더에 제목이미지의 작은이미지만 넣는것이 아니라, 

 전체적인 이미지를 넣는 방법입니다. 

< 헤더에 , 제목에 해당되는 부분의 글씨나 이미지만 변동하는법은 별도 포스팅에서 보실수 있습니다.▼▼  보기 ▼ ▼ >