본문 바로가기
css

[html/css] background-repeat 속성(배경 이미지 패턴)

by 지구별에 2014. 5. 22.

 

 

[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-repeat 속성

 

background-image 속성과 주로 함께 사용하며, 이미지를 어떻게 배열할지 선택합니다.

 

 

【 속성값 】


repeat 기본값으로, 가로 세로 반복적으로 배열합니다.
repeat-x  이미지가 가로로만 반복해서 배열합니다.
repeat-y  이미지가 세로로만 반복해서 배열합니다. 
no-repeat 이미지가 반복 배열되지 않습니다. 

 

 

▶실제 html/css 작성해서 실험해 보겠습니다.

 

배경이미지에 넣을 그림

 

background-repeat.htm

 

<!DOCTYPE html>
<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; 적용할 때
 

 

 

 

반응형

댓글