티스토리 반응형 스킨 #2 배경이미지를 바꿔보자!

티스토리 반응형 스킨을 만지작거리다보니 요즘 대세인 반응형 웹에 대한 자신감이 늘어가는 중!~ 기본은 뭐니 뭐니해도 각 화면별 CSS만 잘 정리해주면 된다는 것~

 

 

이번에 손대볼 곳은 배경이미지입니다. 기본스킨은 배경이미지 하나를 사용하고 있습니다만, 그냥 하나로만 사용하기엔 심심하고 재미가 없죠? 그래서 각 화면별 그리고 펼쳐치는 메뉴쪽 배경을 바꿔 볼 생각입니다.

 

방법을 간단히 요약하자면,

1. 각 영역별 이미지를 업로드한다.

2. 각각의 CSS상의 이미지 URL을 바꿔준다.

정도입니다. 크게 어렵지 않으니 겁내지 마세요~ㅎ

 

일단, 교체할 영역을 살펴보죠~

 

 

가장 큰 PC화면에서 볼때 좌측의 배경이미지가 나타나는 부분입니다. 다스베이더가 오토바이를 타고 있는 이미지 보이시죠?

 

 

 

두번째는  중간 크기로 브라우저에서 볼때의 상단의 배경이미지입니다. 이번엔 다스베이더가 R2를 실고가는 연합군을 쫓고있네요~ㅎㅎ

 

 

 

그리고 마지막 메뉴를 클릭했을때, 메뉴 배경이미지입니다. 스톰트루퍼들이 나란히 서있는 이미지입니다.

 

이렇게 총 3군데의 배경이미지를 바꿔서 나름 테마 다운 스킨으로 바꿔보는 겁니다. 우선 이미지를 3개 구해야겠죠?

이미지는 각자 구글링을 하시거나,  무료이미지사이트를 좀 뒤져서 맘에 드는 이미지로 준비해주세요~

물론, 방법을 알아두시고 찬찬히 제대로 테마스러운 이미지로 바꾸셔도 되겠죠?

 

 

 

 

우선 구하신 이미지를 아래처럼 스킨편집창에서 파일업로드를 합니다.

파일이름은 저와 다르게 지어도 상관없습니다. 아래에서 설명할 이미지 URL에만 본인이 정한 파일이름을 잘 사용하시면 돼요~

 

 

이미지업로드가 완료되었다면, 위의 URL을 메모장에 적어두시면 편하겠죠?

image/이미지이름_01.jpg

image/이미지이름_02.jpg

image/이미지이름_03.jpg

뭐 이런식이 될겁니다.

 

 

그럼 CSS의 어디를 고쳐야할지 찾아보죠

 

 

 

화면이 작아보이지 않을 수도 있겠네요.

일단 큰화면의 좌측 배경이미지를 고치시려면 위 그림 오른아래쪽의 체크된 부분을 참고하시면 됩니다.

제 CSS파일에서는 73줄에 .wrap_sub{)란 곳에 배경이미지가 설정되어있네요.

 

줄 수는 좀 다르겠지만 그 근방에 보시면 .wrap_sub{) 이 보일겁니다.

background-image:url(images/본인의첫번째이미지이름.jpg);

로 바꿔주세요.

 

/*@background-image*/와 /*@*/는 주석이니 삭제해도 상관없습니다.

 

 

 

이번엔 두번째, 중간크기의 브라우저에서의 배경이미지, 보시면 572줄에 또다른 .wrap_sub{}가 보입니다.

background-image:url(images/본인의두번째이미지이름.jpg);

추가해주세요~ (아마 기본은 background-image가 없을테니 추가해주시면 됩니다.)

 

* 여기서 아래에 보이는

background-position과 background-size에 대한 설명은 나중에 다시 따로 블로그에 담아 설명해보도록 할테니 우선 지금은 생략~

 

 

 

자 마지막 메뉴가 펼쳐졌을때의 배경이미지를 바꿔줍시다~. 줄 수 96줄에 있군요.  .navi_on .wrap_sub {}가 보이네요. 위 두 개의 CSS이름과 좀 다르죠? .navi_on 가 앞에 붙어있네요~ (쉽게, 메뉴가 펼쳐져있을때의 .wrap_sub {}대로 표시해라란 뜻입니다.)

 

background-image:url(images/본인의세번째이미지이름.jpg); 를 추가해줍니다.

 

위와 같이 세군데의 CSS를 수정하셨다면 저장을 누르시면 됩니다. 끝~

 

* 다시한번 요약하자면, 위에서 설명한 CSS명을 찾아 background-image의 내용을 수정하거나 추가하면 됩니다.

 

아참!~ 혹 노파심에 CSS를 수정하는 곳은 아래화면참고~ (초보분 중 질문하시는분이 있으실까바)

 

 

 

 

도움되셨다면 하트 버튼 눌러주실꺼죠?