[html/css]background-position 속성(배경이미지 위치 지정)
차례 :
background-image
background-repeat
background-attachment
background-position
background-size
background
지난 시간엔, 배경 이미지를 고정하는 background-attachment 속성에 대해 배웠는데요
오늘은 배경 이미지 위치를 지정하는 background-position 속성입니다.
▶속성값
left top 왼쪽 상단
left center 왼쪽 중앙
left bottom 왼쪽 맨아래
right top 오른쪽 상단
right center 오른쪽 중앙
right bottom 오른쪽 맨아래
center top 가운데 상단
center center 정 가운데
center bottom 가운데 맨아래
두가지 중 한가지만 쓰면 나머지는 자동으로 center가 됩니다.
x% y% x는 가로 위치, y는 세로 위치입니다.
0% 0% 는 left top 과 같으며 , 100% 100% right bottom과 같음.
한 가지만 지정하면 나머지는 50%
cm, px, in, pt, px, em등의 단위와 섞어서 지정도 가능
예 1)
body
{
background-image:url('brabbit.png');
background-repeat:no-repeat;
background-position: right top;
}
예 2)
body
{
background-image:url('brabbit.png');
background-repeat:no-repeat;
background-position: 20% 80%;
}
예 3)
body
{
background-image:url('brabbit.png');
background-repeat:no-repeat;
background-position: 1cm 100px;
}
예 4) 이미지를 여러 개 넣을 경우
body
{
background-image:url('brabbit.png'), url('longhair.png'),
background-repeat:no-repeat;
background-position: 1cm 7cm, 100px 500px;
}
*이미지를 하나 이상 넣는 것은 아래 브라우저에서만 지원합니다.
IE 9+, Mozilla Firefox 3.6+, Safari/Chrome 1.0/1.3+, Opera 10.5+
html/css를 작성해 보겠습니다~
|
html/css |
|
<!DOCTYPE html> <body> </body> |
|
실행화면 |
|
1번 그림: background-position: left top; 2번 그림: background-position: left center: 3번 그림: background-position: left bottom: 입니다
|
배경 이미지 그림을 두 개 넣기
|
html/css |
|
<body> </body> |
|
실행화면 |
|
|
background-position 속성으로 배경 이미지 위치 지정하는 방법을 배워보았습니다~
'css' 카테고리의 다른 글
| [html/css]background-size 속성(배경이미지 크기 조절) (2) | 2014.05.29 |
|---|---|
| [html/css] line-height 속성 배우기 (6) | 2014.05.27 |
| [html/css]background-attachment 속성(배경이미지 고정) (4) | 2014.05.23 |
| [html/css] background-repeat 속성(배경 이미지 패턴) (3) | 2014.05.22 |
| [html/css]배경 이미지를 넣는 background-image 속성 (3) | 2014.05.21 |
댓글