배경 스타일 CSS - background-position

배경 스타일 CSS - background-position

• background-position 속성을 이용하면 배경이미지가 표시되는 위치를 조절합니다.
• 기본형 : background-position : < 수평 위치 > / < 수직 위치 >;
  수평 위치 : left / center / right / < 백분율 > / < 길이 값 >
  수직 위치 : top / center / bottom / < 백분율 > / < 길이 값 >
• background-position 속성에서는 수평 위치값과 수직 위치 값을 함께 표시하는데 값을 하나만 지정할 경우, 그 값은 수평 위치 값으로 간주하고 수직 위치 값은 50%나 center로 간주합니다.
• background-position 속성 값을 두개 지정한다면 앞의 값은 수평 위치 값이 되고 뒤의 값은 수직 위치 값이 됩니다.

키워드 표시법

• 배경 이미지의 위치를 지정할 때 가장 많이 사용하는 속성 값입니다.
• 수평 위치는 left, center, right 중에서 선택할 수 있고 수직 위치는 top, center, bottom 중에서 선택합니다.
• 예를 들어 background-position : center bottom; 이라면 배경 이미지를 브라우저 창의 중앙 하단에 배치합니다.
• background-position : center center 의 경우 간단히 background-position : center; 라고 줄여 쓸 수 있습니다.

백분율 표시법

• 위치 속성 값을 백분율로 표시한다는 것은 주어진 요소의 해당 위치에 배경 이미지의 위치를 백분율로 맞춘다는 뜻입니다.
• 예를 들어 background-position : 0% 0% 라면 배경 이미지를 넣으려는 요소의 왼쪽 모서리에 배경 이미지의 왼쪽 모서리를 맞춥니다.
• background-position : 30% 60% 라면 배경 이미지를 넣으려는 요소의 왼쪽 모서리로부터 가로 30%, 세로 60% 위치에 배경 이미지의 가로 , 세로가 30% 60%인 위치를 맞춥니다.

길이(px) 표시법

• 배경 이미지의 위치를 길이로 직접 지정할 수도 있습니다.
• 예를 들어 background-position : 30px 20px; 라고 지정하면 가로 30픽셀, 세로 20픽셀의 위치에 배경 이미지의 왼쪽 상단 모서리를 맞춥니다.

background-position : left top

background-position : center

background-position : 20%

<style>
    .exam1 {
        width: 700px; height: 200px; 
        border: 1px solid #7a2020; 
        margin-bottom: 10px;
        padding: 150px 10px 10px 10px;
        background-image: url(img/olive.jpg);
        background-repeat: no-repeat;
        background-position: left top;
    }
    .exam2 {
        width: 700px; height: 200px; 
        border: 1px solid #7a2020; 
        margin-bottom: 10px;
        padding: 10px;
        background-image: url(img/olive.jpg);
        background-repeat: no-repeat;
        background-position: center;
    }
    .exam3 {
        width: 700px; height: 200px; 
        border: 1px solid #7a2020; 
        margin-bottom: 10px;
        padding: 10px;
        background-image: url(img/olive.jpg);
        background-repeat: no-repeat;
        background-position: 15%;
    }
</style>