Background-Repeat
개요 : 이 속성은 요소의 배경이미지가 반복되는 방향을 지정한다. 이러한 반복의 시작은 배경이미지 반복 값으로 정한다.
정의
|
정의 |
설명 |
|
값 |
repeat | repeat-x | repeat-y | no-repeat | inherit |
|
기본값 |
repeat |
|
적용대상 |
모든 요소 |
|
상속 |
안됨 |
|
백분율 |
사용 불가 |
|
미디어 |
visual |
값
|
값 |
설명 |
|
repeat |
수평과 수직으로 반복된다. |
|
repeat-x |
수평으로 반복된다. |
|
repeat-y |
수직으로 반복된다. |
|
no-repeat |
반복하지 않고 한개의 이미지만 나타난다. |
|
inherit |
부모 요소의 값을 상속하도록 지정한다. |
View Source :
<style>
p {
background-repeat: no-repeat;
background-image: url(/docs/files/css/background/pattern_156.gif);
color:#f00;
height:100px;
}
</style>
<body>
<p>배경 이미지가 반복되지 않도록, 즉 한번만 출력되도록 지정합니다. </p>
</body>Result :
View Source :
<style>
p {
background-repeat: repeat-x;
background-image: url(/docs/files/css/background/pattern_156.gif);
color:#f00;
height:100px;
}
</style>
<body>
<p>배경 이미지가 가로(x축) 방향으로 반복되도록 지정합니다.</p>
</body>Result :
View Source :
<style> p { background-repeat: repeat-y; background-image: url(/docs/files/css/background/pattern_156.gif); color:#f00; height:100px; } </style> <body> <p>배경 이미지가 세로(y축) 방향으로 반복되도록 지정합니다.</p> </body>Result :View Sourec :<style> p { background-image: url(/docs/files/css/background/pattern_156.gif); color:#f00; height:100px; } </style> <body> <p>배경 이미지 반복을 지정하지 않으면, 가로/세로 방향으로 타일처럼 반복됩니다.</p> </body>Result :
''.' Programs > CSS' 카테고리의 다른 글
| Background-Color (0) | 2012.03.20 |
|---|---|
| Background-Image (0) | 2012.03.20 |
| Background-Position (0) | 2012.03.20 |
| Background - Attachment (0) | 2012.03.20 |
| Background (0) | 2012.03.20 |