티스토리 cc-cross 스킨 다듬기 배경화면 바꾸는 방법

목차

1.cc-cross 스킨 배경 이미지 업로드 및 적용하기
2.cc-corss스킨 배경짤리는 부분 해결하기

 

 

cc-cross 스킨 배경이미지 업로드 및 적용하기

 

안녕하세요 cc-cross스킨 편집을 원하시거나 자료를 찾는 분들을 위해 이번 포스팅에서

cc-cross 스킨 배경화면을 바꾸는 방법에대해서 알아볼까 해요

 

이건 수정전 기본 스킨 상태예요 티스토리 스킨 편집으로 가서 css부분을 살펴볼게요

 

대략 27번째 라인 미디어 쿼리 부분에 body에 배경화면이 설정되어있어요

보면 폴더 내에 images/bg.svg라고 되어있는데 이 bg.svg는 어떻게 보냐면

 

css부분 말고 파일 업로드 부분으로 가면 업로드된 파일들을 모두 볼 수 있는데 여기에서

images/bg.svg라는 파일의 제목으로 패턴 이미지가 있는 걸 보실 수 있어요

저희는 새로운 이미지를 구해서 아래에 추가 버튼을 이용하여 파일을 업로드할 거예요

이미지 파일을 svg로 작업하거나 변환해서 업로드하면 좋지만 그러지 못한 경우엔 일단 그냥 업로드하셔도 됩니다

svg포맷은 크기도 작고 사이트 로딩 시에 더 빠르게 읽어 올 수 있어요

그래서 일러스트 같은 곳에서 패턴 형식으로 제작하여 svg포맷으로 저장하면 좋아요

 

저는 테스트로 이 이미지를 사용하겠습니다 이미지 이름은 wallpaper.jpg입니다

 

이렇게 추가 버튼을 이용하여 파일을 업로드했습니다

 

다시 css편집 페이지로 돌아가 주세요

 

css 편집 페이지에서 기존의 background를 주석 처리하고

방금 업로드한 이미지를 넣어줬습니다

그 후에 반드시 적용 버튼을 눌러야 적용이 됩니다

 

 

그리고 티스토리 블로그에 방문하여 새로고침을 하게 되면

 

아까 삽입한 이미지가 정상적으로 나옵니다

 

cc-corss스킨 배경 잘리는 부분 해결하기

 

나오긴 나오는데.. 뭔가 잘린 부분이 보이죠?? 이걸 꽉 차게 넣기 위해선

 

제가 빨간 부분으로 표시한 부분의 코드대로 수정해줍니다

간단하게 코드를 설명해드리면

첫 번째에는 앞서 bg.svg라는 배경 이미지 패턴 대신에 인터넷에서 받은 jpg 이미지를 넣어줬고

배경 이미지 사이즈를 크기에 맞게 늘리고

배경 이미지의 반복을 없애고 페이지 스크롤을 내려도 배경 이미지는 고정되는

코드를 추가하였습니다

 

그리고 페이지를 새로고침 하고 다시 확인해보겠습니다

 

이번엔 배경이 잘리지 않고 스크롤을 내려도 배경 이미지가 깔끔하게 잘 출력이 되네요!

 

이로써 배경화면 바꾸기 끝~ 의외로 간단한데 어떻게 바꾸는지 모르시는 분들이 있을까 봐

준비했는데 포스팅이 맘에 든다면 하트 꾹 눌러주세요!