[html/css] 배경 이미지를 넣는 background-image 속성 사용법
어제는 배경색을 넣을 때 background-color 속성을 사용한다고 배웠습니다.
글자색 color 속성, 배경색 background-color 속성 배우기
오늘부터 차례대로 배경 이미지와 관련된 속성을 배워보겠습니다.
차례 :
background-image
background-repeat
background-attachment
background-position
background-size
background
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<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를 넣어 보겠습니다.
<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 설정 방법)
'css' 카테고리의 다른 글
| [html/css]background-attachment 속성(배경이미지 고정) (4) | 2014.05.23 |
|---|---|
| [html/css] background-repeat 속성(배경 이미지 패턴) (3) | 2014.05.22 |
| [html/css] 글자색 color 속성, 배경색 background-color 속성 배우기 (1) | 2014.05.20 |
| @font-face 사용규칙(eot, woff, otf/ttf, svg/svgz 차이) (0) | 2014.05.19 |
| @import rule 사용법, link 태그와 차이 (3) | 2014.05.16 |
댓글