[background] CSS - background-repeat 속성 ★ - 배경이미지 반복 (= 배경반복 = background-repeat속성 = 백그라운드리피트속성)

1. background-repeat 예제 - 배경이미지 반복 X
2. background-repeat 정의
3. 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 - 부모요소의 속성값 상속.