본문 바로가기
css

[html/css]background-position 속성(배경이미지 위치 지정)

by 지구별에 2014. 5. 26.

 

 

[html/css]background-position 속성(배경이미지 위치 지정)

 

 

차례 :


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

background-size
background

 

 

지난 시간엔, 배경 이미지를 고정하는  background-attachment 속성에 대해 배웠는데요

 

오늘은 배경 이미지 위치를 지정하는 background-position 속성입니다.

 

 

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>
<html>
<head>
<style>
body
{
background-image:url('brabbit.png');
background-repeat:no-repeat;
background-position: left center;
}
</style>
</head>

<body>

</body>
</html>

 

 

 실행화면

 

  

1번 그림: background-position: left top;

2번 그림: background-position: left center:

3번 그림: background-position: left bottom: 입니다

 

  

 

 

배경 이미지 그림을 두 개 넣기

 

 html/css


<html>
<head>
<style>
body
{
background-image: url('brabbit.png'), url('umbrella.png');
background-repeat:no-repeat;
background-attachment: fixed;
background-position:   left top, right bottom;
}
</style>
</head>

<body>

</body>
</html>

 

 

 실행화면

 

   

 

background-position 속성으로 배경 이미지 위치 지정하는 방법을 배워보았습니다~

 

 

 

 

반응형

댓글5