본문 바로가기
css

[html/css]배경 이미지를 넣는 background-image 속성

by 지구별에 2014. 5. 21.

 

 

[html/css] 배경 이미지를 넣는 background-image 속성 사용법

 

 

어제는 배경색을 넣을 때 background-color 속성을 사용한다고 배웠습니다.

 

글자색 color 속성, 배경색 background-color 속성 배우기

 

오늘부터 차례대로 배경 이미지와 관련된 속성을 배워보겠습니다.

 

 

차례 :


background-image
background-repeat
background-attachment
background-position
background-size
background

 

 

background-image 속성

 

 

background-image는 배경 이미지를 넣을 때 쓰는 속성입니다.

 

어떤 요소에 배경 이미지를 넣으면 padding을 포함하여 배경을 채우게 됩니다. (margin은 제외)

 

기본값으로, 배경 이미지는 상단 왼쪽에 위치(top-left)하며, 가로 세로 반복적으로 배열 됩니다.

 

 
상속여부: NO

 

이미지가 제대로 표시되지 않을 경우에 대비하여 background-color(배경색)도 같이 지정하는 게 좋습니다.

 

 

사용 예 :


body{
background-image: url('rabbit.png');

background-color: #D9E5FF;
}

 

url('  ')     따옴표 안에 이미지가 위치한 주소를 적습니다.

 

 

여러 이미지를 사용할 경우 쉼표로 분리합니다.

 

하나 이상의 이미지를 넣는 것은 아래 브라우저에서만 가능합니다.

 

 IE (9.0+), Mozilla Firefox (3.6+),  Safari/Chrome (1.0/1.3+),  Opera (10.5+) 

 

사용 예:


div#header{

background-image: url('rabbit.png'), url('nero.png');
}

 

 

실제 html/css 작성해 보겠습니다

 

배경이미지로 넣을 그림입니다.

 

backgroundimage.htm

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('tree.png');
background-color: #D9E5FF;
}
</style>
</head>

 

<body>
<h3>1절</h3>
<p>산토끼 토끼야 어디를 가느냐</br>
깡충깡충 뛰어서 어디를 가느냐</br></p>

 

</body>

</html> 

 

 

☞ 실행화면입니다.

 

이미지가 기본적으로 가로 세로 배열되었네요...

 

 

 

 

이번에는 2개의 div를 만들어(300x 100) padding 10px, margin 10px를 넣어 보겠습니다.

 

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width: 300px;
height: 100px;
border: 1px solid red;
background-image:url('tree.png');

padding: 10px;
margin: 10px;

}
</style>
</head>

<body>

<div>
산토끼 토끼야 어디를 가느냐</br>
깡충깡충 뛰어서 어디를 가느냐
</div>

<div>
산고개 고개를 나 혼자 넘어서</br>
토실토실 알밤을 주워서 올테야
</div>
</body>
</html> 

 

☞ 실행화면입니다

 

padding: 10px 부분까지  배경이 채워집니다

 

 

 

 

 

padding 속성 사용법(padding-right, padding-left, padding-top, padding-bottom)

 

margin 속성 자세히 알아 보기(margin-top,margin-left, margin-bottom, margin-left 설정 방법)

 

반응형

댓글