초보자도 할 수 있는 티스토리 블로그 프로필 배경 이미지 삽입 방법

티스토리 블로그 오디세이 스킨 프로필 배경 이미지 사이즈와 삽입 방법, CSS 오버레이 제거 코드 찾아 조절하는 방법까지 알려드립니다.

 

티스토리 블로그를 다른 블로그와 다르게 꾸미고 싶어서 시작한 블로그 꾸미기 시리즈. 

벌써 세 번째 포스팅이 되었습니다.

 

개발자도 아니고 코드도 모르는 제가 블로그 꾸미기는 처음엔 너무 어려웠지만 AI가 발달한 지금, 그록3의 도움을 받아 제가 원하는 이미지를 첨부해 조금씩 바꿔보고 있습니다. 

 

2025.06.02 - [블로그 온라인 수익화의 기록] - 코딩 몰라도 가능한 티스토리 스킨 CSS 편집 : 배너 오버레이 제거 방법

코딩 몰라도 가능한 티스토리 스킨 CSS 편집 : 배너 오버레이 제거 방법

블로그 배너(타이틀) 이미지를 삽입할 때 오디세이 블로그 스킨 배너 부분에 적용되는 어두운 오버레이 제거를 CSS 코드 편집으로 할 수 있는 방법을 익히게 되었었습니다.

 

2025.06.03 - [블로그 온라인 수익화의 기록] - tistory 블로그 스킨 편집 기능으로 바꾸기

tistory 블로그 스킨 편집 기능으로 바꾸기

CSS 코드를 몰라도 블로그 스킨 편집 기능 부분에서 이미지 업로드와 구성으로 블로그 분위기를 바꿀 수 있는 방법도 알려드렸었습니다. 

 

오늘은 티스토리 블로그 프로필 배경 이미지 삽입 방법에 대해 알려드리겠습니다. 

 

초보자도 할 수 있는 티스토리 블로그 프로필 배경 이미지 삽입 방법

• 티스토리 오디세이 블로그 스킨에 적용되는 프로필 배경 이미지 만들고 삽입하는 방법.
• 오디세이 스킨 프로필 배경 사이즈
• 배경 이미지 제작 방법
  • Canav
  • 챗GPT로 프로필 이미지 만들기 
• 프로필 배경 이미지 삽입 방법
  • 티스토리 관리자 페이지 접속 순서
  • 오디세이 스킨에 적용된 프로필 이미지 사이즈 확인 방법
• 프로필 이미지에 적용된 어두운 오버레이 CSS에서 조절하는 방법
  • 어두운 오버레이 조절 2가지 방법

티스토리 오디세이 블로그 스킨에 적용되는 프로필 배경 이미지 만들고 삽입하는 방법.

 

오디세이 스킨 프로필 배경 사이즈

가로 300, 세로 430px(픽셀)입니다.

 

배경 이미지 제작 방법

Canav

저는 캔바(Canav)를 이용해서 제가 원하는 구성 요소를 첨부해서 사이즈에 맞게 제작했습니다. 

하지만 캔바에서 이미지 크기를 조절하는 것이나 제공되는 AI 사용은 유료 이용자만 사용할 수 있는 기능입니다. 

무료로 사용하는 분들은 사용할 수 없는 기능입니다. 

 

챗GPT로 프로필 이미지 만들기 

제가 캔바에서 만든 이미지를 업로드하고 같은 이미지를 만들려면 프롬프트를 어떻게 입력해야 하냐고 질문하니 위와 같은 답변을 주었습니다. 

 

업로드한 파일이 있어서인지 비슷하게 만들어주었고 스티치 라인이 빠져서 첨부해서 다시 만들어 달라고 요청하니 스티치 테두리를 첨부해서 프로필 배경 이미지를 생성해 줬습니다. 

프로필 배경 이미지 삽입 방법

티스토리 관리자 페이지 접속 순서

블로그 관리 → 꾸미기 → 스킨 편집  → 프로필 배경 이미지 → 이미지 업로드

사이즈에 맞게 프로필 배경을 제작해 업로드하면 위의 사진과 같이 위와 아래 이미지는 맞춰서 보이는 데 가로의 점선들이 보이지 않게 됩니다.

 

프로필에 적용되는 활성화 버튼이 한 줄 더 생겨서 미리 보기로 보이기 때문입니다. 

미리 보기에 프로필 배경이 정확하게 적용되기 위해서는 가로 300, 세로 510px 사이즈로 조정해서 이미지를 만들어 업로드해야 합니다.

하지만 적용 후 실제 블로그에서 확인하면 가로 크기는 맞춰졌지만 세로 크기는 제대로 적용되지 않을 걸 확인할 수 있습니다. 

그러니 미리 보기로 보이는 것을 신경 쓰지 마시고 가로 300, 세로 430px(픽셀)로 프로필 배경 이미지를 제작해서 업로드하시면 실제 블로그에는 제대로 적용됩니다. 

728x90

오디세이 스킨에 적용된 프로필 이미지 사이즈 확인 방법

세로 사이즈는 스킨 편집에 CSS 코드에 'profile'로 찾아 430px 인 것을 확인했습니다.

 

가로 사이즈는 블로그 페이지 소스에서 찾았습니다. 

 

프로필 이미지에 적용된 어두운 오버레이 CSS에서 조절하는 방법

블로그 관리 → 꾸미기 → 스킨 편집 → html 편집 → CSS 순으로 이동

CSS 창에서 'Ctrl + F' 눌러서 입력창에 'background-color' 입력 후 검색

검색된 45개의 'background-color' 중 코드에서 "rgba(0, 0, 0, 0.3)"같은 값을 찾습니다.

(저 같은 경우는 세 번째 순서에 색상 조절 코드가 있었습니다.)

 

어두운 오버레이 조절 2가지 방법

1. 불투명도 조절 방법

조절바를 내려서 불투명도를 '0'으로 맞춥니다.

컬러를 바꾸지 않아도 불투명도를 '0'으로 맞추면 컬러가 선택되어 있어도 적용되지 않습니다.

 

2. 다른 컬러로 불투명도 유지하는 방법

색상바에서 흰색을 선택하고 불투명도를 유지하면 흰색 오버레이가 적용됩니다. 

 

컬러와 불투명도를 조절 후에는 반듯이 '미리 보기'로 확인 후 최종적으로 결정이 되었을 때 코드창 위에 있는 '적용' 버튼을 눌러 블로그에 적용시킵니다. 

 

지난 며칠간 이런 과정을 찾기 위해 그록3 AI에 질문하고 답을 얻고 시도해 보면서 블로그 배너 이미지, 프로필 배경 이미지를 첨부하고 어두운 느낌의 필터가 씐듯한 분위기까지 수정해서 원하는 스타일의 분위기를 꾸밀 수 있었습니다. 

 

물론 지금도 거슬리는 부분이 있는 데 그 부분도 AI에게 배워서 수정해보려고 합니다. 

 

코드 몰라도, 개발자 아니어도, 블로그 초보자여도 내가 원하는 블로그로 충분히 꾸밀 수 있습니다.

시도해 보세요.

 

저의 글이 도움이 되셨다면 ❤️공감과 덧글 부탁드립니다.😉