background-image

background-repeat

"> 05-01_image-repeat

background-image

background-repeat

"> 05-01_image-repeat

background-image

background-repeat

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>05-01_image-repeat</title>
<!--
	# background-image
	- 요소의 배경 이미지를 지정.
	
	# background-repeat
	- 배경이미지의 반복 지정.
	- background-repeat 속성의 기본값이 repeat 이기 때문에, 설정된 이미지의 크기가 화면보다 작으면 자동으로 이미지가 반복 적용.
	- no-repeat : 배경 이미지를 한번만 적용
	  repeat-x  : 배경 이미지를 가로 방향으로 반복 적용.
	  repeat-y  : 배경 이미지를 세로 방향으로 반복 적용.
-->
<style type="text/css">
.norepeat {
	border: 1px solid red;
	height: 200px;
	background-image: url('../../image/bg_image/flower_bee.jpg');
	background-repeat: no-repeat;
}
.repeat-x {
	height: 200px;
	background-image: url('../../image/bg_image/narrow_bg.png');
	background-repeat: repeat-x;
}

</style>
</head>
<body>
	<h1>background-image</h1>
	<div class="norepeat">
		<img src="../../image/bg_image/banner.png">
	</div>
	<hr>
	<h1>background-repeat</h1>
	<div class="repeat-x">
		<img src="../../image/bg_image/bombit_logo.png">
	</div>
	<hr>
</body>
</html>