[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.

기본적으로, 배경이미지는 기본 (세로/가로)로 반복됨.

 

2.

background-position 속성 이용해 배경이미지 시작 위치 지정.

만약, 별도 지정 없으면, 왼쪽 상단 꼭지점부터 시작함.

 

3.

기본값: repeat

상속여부: X

애니효과: X

CSS버전: CSS1

JS구문: object.style.backgroundRepeat="repeat-x"

 

4.

모든 브라우저 지원.

 

background-repeat 구문

 

selector {background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;}

 

---

[속성값]

repeat
가로/세로 반복. (기본값)

 

repeat-x

가로만 반복.

 

repeat-y

세로만 반복.

 

no-repeat

반복 X.

 

inherit

부모 속성 상속.