포스트 영역및 사이드바 영역이 고유의 색깔을 가지고 있지 않은 경우 블로그에 배경이미지를 사용하게 되면 배경이미지가
포스트 영역및 사이드바 영역까지 적용이 되어버리게 됩니다. 따라서 이 부분은 해당 영역에 고유의 색깔을 집어넣음으로서 해결이
가능해지는 문제입니다.

우선 원하는 배경이미지(주로 패턴이미지를 많이 사용)를 블로그에 직접 업로드 합니다.
이 경우 이미지의 주소가 ./images/(확장자를 포함한 이미지이름)이 되겠습니다.

업로드를 했으면 skin.html 부분의 </head> 문장 바로밑에 아래의 태그를 삽입해줍니다.
<body background="./images/savepatten.jpg(자신이 업로드한 파일로 이름및 확장자를 변경해주세요)">

그리고나서 미리보기로 제대로 배경이미지가 적용이 되었는지 살펴봅시다.

적용이 되었다면 다음으로는 포스트 영역인 content 항목에 태그를 삽입해야 합니다.
<div id="content"> 항목을 찾은 후 아래와 같이 만들어 줍니다.
<div id="content" style="background-color:#FFFFFF;">
여기서 뒤의 컬러부분만 원하는 색으로 조절해줍니다. 여기에 사용된값은 흰색입니다.


미리보기를 해 보시면 이제 포스트영역에 정상적으로 배경색깔이 들어간것을 보실 수 있습니다.
만일 헤더부분과 포스트영역이 간격이 벌어져있다면 #header { 를 검색한 후 그 아래쪽에 margin-bottom 이라는 문장이 존재하는지
살펴봅시다. 이 태그의 수치를 0px로 고쳐주시면 헤더와 포스트영역간의 간격이 사라지게 되는것이죠.

이제 포스트영역은 일단락되었으니 사이드바 영역에 배경색깔이 집어넣어봅시다.
자, div id="sidebar" 를 검색해주세요. 그 후 아래처럼 태그를 완성시켜줍니다.
<div id="sidebar" style="background-color:#FFFFFF;">
역시 뒷 부분의 배경색깔만 바꿔주시면 됩니다. 사용된 예시는 흰색이구요.

이것을 응용하면 각 개별영역에 각기 다른 배경이미지를 삽입할수도 있답니다.

신고


티스토리 툴바