div.or.kr이 ofcourse 로 이전 될 예정입니다.
새로운 강의로 보기
background-repeat 속성

개요

일반적으로 background-image 로 컨테이너보다 작은 이미지를 적용 시 이미지지가 반복되어 출력된다.

이때 background-repeat 속성을 사용하면 반복여부를 지정 할 수 있다.

사용법

#box{ background-repeat:no-repeat }

예제

<html>
<head>
	<style>
		.box{ width:600px; height:200px; margin-bottom:30px; background-image:url('android.jpg'); border:1px solid #AAA}
		#box1{ background-repeat: no-repeat }
		#box2{ background-repeat: repeat }
		#box3{ background-repeat: repeat-x }
		#box4{ background-repeat: repeat-y }
	</style>
</head>
<body>
	<div id="box1" class="box"></div>
	<div id="box2" class="box"></div>
	<div id="box3" class="box"></div>
	<div id="box4" class="box"></div>
</body>
</html>
출력 결과: