목차
- background-repeat 예제 - 배경이미지 반복 X
- background-repeat 정의
- background-repeat 구문
background-repeat 예제 - 배경이미지 반복 X
<style>
div {
background-image: url("
https://i.imgur.com/PQNhCln.gif");
background-repeat: no-repeat;
border: 1px solid red;
}
h1 {
background-image: inherit;
}
</style>
<div> <h1>홈짱닷컴 (homzzang.com)</h1> </div>
background-repeat 정의
배경이미지 반복 여부 지정.
1.
- 기본적으로, 배경이미지는 기본 (세로/가로)로 반복됨.
- background-position 속성 이용해 배경이미지 시작 위치 지정.
- 만약, 별도 지정 없으면, 왼쪽 상단 꼭지점부터 시작함.
2.
- 기본값: repeat
- 상속여부: X
- 애니효과: X
- CSS버전: CSS1
- JS구문: object.style.backgroundRepeat="repeat-x"
3.
background-repeat 구문
selector {background-repeat: repeat|repeat-x|repeat-y|no-repeat|space|initial|inherit;}
[속성값]
- repeat - 가로/세로 반복. (기본값)
- repeat-x - 가로만 반복.
- repeat-y - 세로만 반복.
- no-repeat - 반복 X
- space - 배경이미지는 짤림 없이 최대한 반복 균등 배분 배치. (이미지는 양쪽 끝에 고정되고 이미지 간 사이 공백은 균등 거리 유지)
- initial - 이 속성의 기본값 사용.
- inherit - 부모요소의 속성값 상속.