목차
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 ; 0% 0% ;
left center ; background-position:0% 50%;
left bottom ; background-position:0% 100%;
background-position:center ; background-position:50% 0%;
center ; 50% 50% ;
중앙 하단 center ; background-position:50% 100%;
오른쪽 상단
background-position:right top ; background-position:100% 0%;
오른쪽 중단 right center ; background-position:100% 50%;
right bottom ; 100% 100% ;
PS. x(가로) y(세로) 모두 center 일 땐, center 한번만 써도 됨.
(예) background-position:center ;
