CSS 코스

background 속성

개요

background 속성은 태그의 배경을 지정하는 속성으로, font 속성과 비슷하게 세부적인 속성들을 한번에 쓸 수 있는 속성입니다.

아래의 세부적인 속성을 가집니다.

background-color 배경 색
background-image 배경 이미지
background-repeat 배경 이미지 반복 여부
background-position 배경 이미지 위치

background-color

배경색을 의미하며, 값은 color 속성의 포맷을 사용합니다.

태그의 크기가 없을 경우 배경색은 표기되지 않습니다.

예제

<style>
	#box1-1{ background-color: green; }
	#box1-2{ background-color: #FF00CC; width: 200px }
</style>
<div id="box1-1">상자상자상자1</div>
<div id="box1-2">상자상자2<br>상자상자</div>

background-image

배경 이미지를 설정하며, 주로 이미지 경로를 지정하는 방식으로 사용합니다.
경로는 background-image: url("이미지 경로") 처럼 작성합니다.

특별한 점은 컨테이너의 크기와 상관없이 삽입된 background-image의 크기는 컨테이너에 맞춰 늘어나거나 줄어들지 않고 그대로 표시되며,
이미지 보다 컨테이너가 더 크다면 이미지는 반복되어 표시되게 됩니다.

예제

<style>
	#box2-1 {
		width: 100px;
		height: 100px;
		background-image: url("/images/attach/earth.jpg");
	}
	#box2-2{
		width: 300px;
		height: 150px;
		margin-top: 30px;
		background-image: url("/images/attach/earth.jpg");
	}
</style>
<div id="box2-1"></div>
<div id="box2-2"></div>

background-repeat

background-image로 컨테이너보다 작은 이미지를 적용하면 이미지가 반복되어 출력됩니다.
이때 background-repeat 속성을 사용하면 반복여부를 지정 할 수 있습니다.

예제

<style>
	.abox{
		width: 500px;
		height: 100px;
		margin-bottom: 15px;
		background-image: url("/images/attach/android.jpg");
		border: 1px solid #AAA;
	}
	#box3-1{ background-repeat: no-repeat }
	#box3-2{ background-repeat: repeat-x }
	#box3-3{ background-repeat: repeat-y }
	#box3-4{ background-repeat: repeat }
</style>

<div id="box3-1" class="abox"></div>
<div id="box3-2" class="abox"></div>
<div id="box3-3" class="abox"></div>
<div id="box3-4" class="abox"></div>

background-position

일반적으로 background-image 는 왼쪽 위부터 이미지를 출력합니다.
background-position 속성을 사용하면 이미지의 좌표를 수정 할 수 있게 됩니다.

margin, padding 속성에서 지정했던 것과 비슷하게 띄어쓰기를 기준으로 x좌표, y좌표를 지정합니다.
픽셀 뿐만 아니라 left, top, center, bottom, right 등의 상수도 쓸 수 있습니다.

예제

<style>
	.abox{
		width: 500px;
		height: 100px;
		margin-bottom: 15px;
		background-image: url("/images/attach/android.jpg");
		border: 1px solid #AAA;
	}
	#box4-1{ background-position:center center; background-repeat: no-repeat }
	#box4-2{ background-position:30px right; background-repeat: repeat }
	#box4-3{ background-position:-100px -60px; background-repeat: repeat-x }
	#box4-4{ background-position:40px -90px; background-repeat: repeat-y }
</style>

<div id="box4-1" class="abox"></div>
<div id="box4-2" class="abox"></div>
<div id="box4-3" class="abox"></div>
<div id="box4-4" class="abox"></div>

background

사용법

#box{ background: #09C url('image.png') no-repeat 10px center; }

예제

<html>
<head>
	<style>
		#box5{
			width: 300px;
			height: 100px;
			background: yellow url('/images/attach/google.png') no-repeat center center;
		}
	</style>
</head>
<body>
	<div id="box5"></div>
</body>
</html>

이 페이지 수정 제안하기