CSS 강좌 | Property > background-position

개요

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

  • 기본값 : 0% 0%
  • 상속 : No
  • 애니메이션 : Yes
  • 버전 : CSS Level 1

문법

background-position: x-position y-position | initial | inherit
  • x-position y-position : 가로 위치와 세로 위치를 정합니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

위치 값으로 사용할 수 있는 것은 다음과 같습니다.

  • 가로 위치 값 : left, center, right, 백분율, 길이
  • 세로 위치 값 : top, center, bottom, 백분율, 길이

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      div {
        width: 100%;
        height: 600px;
        border: 1px solid #bcbcbc;
      }
      .a {
        background-image: url( "images/bg-gray.png" );
        background-repeat: no-repeat;
        background-position: 10% 100px;
      }
    </style>
  </head>
  <body>
    <div class="a">
    </div>
  </body>
</html>

브라우저 지원

  • Chrome : 1.0+
  • Firefox : 1.0+
  • Internet Explorer : 4.0+
  • Opera : 3.5+
  • Safari : 1.0+
Category

Created on 2014-01-23 13:52 | Updated on 2017-04-27 11:11

이 글을 공유하기

Kakao

기초 강좌