CSS / background-repeat / 배경 이미지 반복 여부 정하는 속성
개요
background-repeat로 배경 이미지의 반복 여부와 반복 방향을 정합니다.
- 기본값 : repeat
- 상속 : No
- 애니메이션 : No
- 버전 : CSS Level 1
문법
|
1 |
background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit |
- repeat : 가로 방향, 세로 방향으로 반복합니다.
- repeat-x : 가로 방향으로 반복합니다.
- repeat-y : 세로 방향으로 반복합니다.
- no-repeat : 반복하지 않습니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.
예제
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { width: 100%; height: 600px; border: 1px solid #bcbcbc; } .a { background-image: url( "images/bg-house.png" ); background-repeat: repeat; } </style> </head> <body> <div class="a"> </div> </body> </html> |
|
1 |
background-repeat: repeat-x; |
|
1 |
background-repeat: repeat-y; |
|
1 |
background-repeat: no-repeat; |
브라우저 지원
- Chrome : 1.0+
- Firefox : 1.0+
- Internet Explorer : 4.0+
- Opera : 3.5+
- Safari : 1.0+