[html/css] background-repeat 속성(배경 이미지 패턴)
html 문서에 배경 이미지를 넣는 속성에 대해 배워 보고 있습니다.
어제는 background-image 속성으로 배경 이미지를 넣는 방법을 배웠습니다
글자색 color 속성, 배경색 background-color 속성 배우기
배경 이미지를 넣는 background-image 속성
오늘은 배경 이미지를 넣을 때 어떤 패턴으로 넣을지 선택하는 속성 background-repeat 입니다.
차례 :
background-image
background-repeat
background-attachment
background-position
background-size
background
background-image 속성과 주로 함께 사용하며, 이미지를 어떻게 배열할지 선택합니다.
【 속성값 】
repeat 기본값으로, 가로 세로 반복적으로 배열합니다.
repeat-x 이미지가 가로로만 반복해서 배열합니다.
repeat-y 이미지가 세로로만 반복해서 배열합니다.
no-repeat 이미지가 반복 배열되지 않습니다.
▶실제 html/css 작성해서 실험해 보겠습니다.
배경이미지에 넣을 그림
background-repeat.htm
<html>
<head>
<style>
div
{
width: 700px;
height: 200px;
border: 1px solid blue;
background-image:url('rabbit.png');
margin: 10px;
}
#re{
background-repeat: repeat;
}
#rex{
background-repeat: repeat-x;
}
#rey{
background-repeat: repeat-y;
}
#nore{
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="re">
산토끼 토끼야 어디를 가느냐</br>
깡충깡충 뛰어서 어디를 가느냐
</div>
<div id="rex">
산고개 고개를 나 혼자 넘어서</br>
토실토실 알밤을 주워서 올테야
</div>
<div id="rey">
산고개 고개를 나 혼자 넘어서</br>
토실토실 알밤을 주워서 올테야
</div>
<div id="nore">
산고개 고개를 나 혼자 넘어서</br>
토실토실 알밤을 주워서 올테야
</div>
</body>
</html>
▶실행화면입니다.
background-repeat: repeat; 적용할 때(기본값임)
background-repeat: repeat-x; 적용할 때
background-repeat: repeat-y; 적용할 때
background-repeat: no-repeat; 적용할 때
'css' 카테고리의 다른 글
| [html/css]background-position 속성(배경이미지 위치 지정) (5) | 2014.05.26 |
|---|---|
| [html/css]background-attachment 속성(배경이미지 고정) (4) | 2014.05.23 |
| [html/css]배경 이미지를 넣는 background-image 속성 (3) | 2014.05.21 |
| [html/css] 글자색 color 속성, 배경색 background-color 속성 배우기 (1) | 2014.05.20 |
| @font-face 사용규칙(eot, woff, otf/ttf, svg/svgz 차이) (0) | 2014.05.19 |
댓글