목차
- background-position 예제 - 배경이미지 중앙 배치
- background-position 정의
- background-position 구문
- background-position 예제 - 배경이미지 위치 지정
background-position 예제 - 배경이미지 중앙 배치
<style>
body {
background-image: url("https://i.imgur.com/PQNhCln.gif");
background-repeat: no-repeat;
background-attachment : fixed;
background-position:center;
}
div {
height:2000px;
}
h1 {
margin-left:100px;
color:white;
}
</style>
<body>
<div><h1>홈짱닷컴 (homzzang.com)</h1></div>
</body>
background-position 정의
배경이미지 시작 위치 지정.
1.
기본적으로, 배경이미지는 왼쪽상단 꼭지점부터 시작하며, (가로/세로) 반복.
2.
3.
4. MDN background-position 예제 보기
background-position 구문
selector {background-position:x y|initial|inherit;}
[속성값]
X
(가로위치) 가능 속성값
left, center, right, %, px, initial, inherit
Y
(세로위치) 가능 속성값
top, center, bottom, %, px, initial, inherit
initial
이 속성의 기본값으로 설정.
inherit
부모요소의 속성값 상속.
PS. %나 px로 xy위치 표현할 땐, 왼쪽 상단 기준으로 이격 거리 기재.
background-position 예제 - 배경이미지 위치 지정
왼쪽 상단
background-position:left top;
background-position:0% 0%;
왼쪽 중단
background-position:left center;
background-position:0% 50%;
왼쪽 하단
background-position:left bottom;
background-position:0% 100%;
중앙 상단
background-position:center top;
background-position:50% 0%;
중앙 중단
background-position:center center;
background-position:50% 50%;
중앙 하단
background-position:center bottom;
background-position:50% 100%;
오른쪽 상단
background-position:right top;
background-position:100% 0%;
오른쪽 중단
background-position:right center;
background-position:100% 50%;
오른쪽 하단
background-position:right bottom;
background-position:100% 100%;
PS. x(가로) y(세로) 모두 center 일 땐, center 한번만 써도 됨.
(예) background-position:center;
