background-image 속성

개요

background-image 속성은 배경 이미지를 설정한다.

파일 삽입시 "url(이미지경로)" 형태를 사용한다.

이때, 컨테이너의 크기와 상관없이 삽입된 background-image의 크기는 줄여지거나 늘어나지 않고 그대로 표시되며, 이미지 보다 컨테이너가 더 클 시 이미지는 반복되어 표시된다.

사용법

#box{ background-image:url('logo.png') }
#box2{ background-image:url(logo2.jpg) }

예제

<html>
<head>
	<style>
		#box1{ width:225px; height:225px; background-image:url(earth.jpg); }
		#box2{ width:500px; height:300px; margin-top:80px; background-image:url('earth.jpg'); }
	</style>
</head>
<body>
	<div id="box1"></div>
	<div id="box2"></div>
</body>
</html>
출력 결과: