티스토리 고정된 배경 이미지 사용하기
<body>에 배경화면을 쓰는 경우에 대한 팁입니다.
body에 background속성으로 배경화면을 넣는 경우 본문을 스크롤 할 때 배경화면도 함께 스크롤 됩니다.
본문을 스크롤 하더라도 배경화면을 고정하고 싶은 경우 사용할 수 있는 방법입니다.
고정 배경 이미지 적용하기
HTML/CSS편집 - Style.css에 다음을 추가하시면 됩니다.
※이 방법을 사용하게 되면 IE7 이하에서는 배경화면이 보이지 않게됩니다.
body:before{
content:"";
position:fixed;
top:0;right:0;bottom:0;left:0;
background:#fff url('./images/bg.jpg') top;
background-size: contain;
background-repeat:no-repeat;
z-index:-1;
}
background 뒤의 #fff는 배경 이미지의 나머지 부분에 적용될 색상입니다.
url('~~') 부분에 배경으로 쓸 이미지의 url을 넣으면 됩니다. (HTML/CSS편집에서 업로드한 파일은 위와 같이 './images/파일이름'으로 쓸 수 있습니다.)
경우에 따라 backgound-size나 repeat속성 또한 조절해줍니다. 사용가능한 속성 예제는 여기서.
배경이미지가 보이지 않거나 기존 배경 이미지가 있는경우,
style.css에서 body 혹은 html로 검색했을 때, 중괄호 { }안에 background속성이 있는 경우 해당 속성을 삭제해주어야 제대로 표시됩니다.
혹은 다음 줄을 css 마지막에 추가합니다.
html,body{background:none!important}
