목차
- background-attachment 예제 - 배경이미지 고정 O
- background-attachment 정의
- background-attachment 구문
- background-attachment 예제 - 배경이미지 고정 X
- background-attachment 이슈 - 고정 배경이미지 좌우 흔들림 방지
background-attachment 예제 - 배경이미지 고정 O
<style>
body {
background-image: url("
http://i.imgur.com/MzHQIAK.jpg");
background-repeat: no-repeat;
background-attachment : fixed;}
div {
height:2000px;
}
h1 {
color:white;
}
</style>
<body>
<div><h1>홈짱닷컴 (homzzang.com)</h1></div>
</body>
결과보기
background-attachment 정의
배경이미지 고정시킬건지, 스크롤과 함께 움직이게 할건지 지정.
1.
2.
사파리 제외한 주요 최신 브라우저 모두 지원.
3. MDN background-attachment 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
background-attachment 구문
selector {background-attachment: scroll|fixed|local|initial|inherit;}
[속성값]
scroll
배경이미지가 페이지와 함께 스크롤 O. (기본값)
- 배경이미지가 해당 요소 자체 기준으로 고정됨.
- 이미지가 요소의 테두리에 효과적으로 부착됨.
fixed
배경이미지가 페이지와 함께 스크롤 X. (= 배경이미지 고정.)
local
배경이미지가 요소 내용과 함께 스크롤.
initial
이 속성의 기본값으로 설정.
inherit
부모요소의 속성값 상속.
background-attachment 예제 - 배경이미지 고정 X
<style>
body {
background-image: url("
http://i.imgur.com/MzHQIAK.jpg");
background-repeat: no-repeat;
background-attachment : scroll;}
div {
height:2000px;
}
h1 {
color:white;
}
</style>
<body>
<div><h1>홈짱닷컴 (homzzang.com)</h1></div>
background-attachment 이슈 - 고정 배경이미지 좌우 흔들림 방지
[원인]
세로 스크롤바 존재 여부.
[해결]
body 스타일에 아래 코드 추가해 항상 세로 스크롤바가 존재하게 만듦.
body {min-height:1000px;}
