background-position

배경 이미지의 위치를 설정

 

 

속성 값

값	의미	기본값
%	왼쪽 상단 모서리는 0% 0%, 오른쪽 하단 모서리는 100% 100%	0% 0%
방향	방향을 입력하여 위치 설정 top, bottom, left, right, center
단위	px, em, cm 등 단위로 지정

.box{
  width: 550px;
  height: 350px;
  border: 2px solid lightgray;
  background-image:
    url("https://heropy.blog/css/images/vendor_icons/css3.png");
  background-size:100px;
  background-repeat: no-repeat;
  background-position: right bottom;
}

 

사용법

값이 방향일 경우 (값의 순서가 바뀌어도 상관이 없다.)

background-position: 방향1 방향2;

 

값이 단위(%, px 등)이 경우 (값의 순서가 바뀌면 안된다.)

background-position: x축 y축;

--> 만약 %단위 사용하는게 햇갈리다면 px단위로 하는것을 추천한다.

 

 

주의사항

.box{
  width: 550px;
  height: 350px;
  border: 2px solid lightgray;
  background-image:
    url("https://heropy.blog/css/images/vendor_icons/css3.png");
  background-size:100px;
  background-repeat: no-repeat;
  background-position: 50px bottom;
}

다음과같이 혼합해서 사용이 가능하다. position에 50px bottom 이것의 순서를 바꾸면 안된다. 그럼 다르게 출력이 된다. 즉 bottom, top은 y축 지정하는 명령어라고 생각하면 된다. 또한 

.box{
  width: 550px;
  height: 350px;
  border: 2px solid lightgray;
  background-image:
    url("https://heropy.blog/css/images/vendor_icons/css3.png");
  background-size:100px;
  background-repeat: no-repeat;
  background-position: left 40px;
}

position에 left 40px의 순서도 바뀌면 안된다. left, right는 x축 지정하는 명령어이기 때문이다.