CSS) background-position

1) background-position

배경 이미지의 위치를 설정

속성 값

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

 

사용법

값이 방향일 경우

background-position: 방향1 방향2;

값이 단위(%, px등)일 경우

background-position: x축 y축;

 

 

1. 방향

html

<div class="box"></div>

css

.box {
  width: 260px;
  height: 200px;
  border: 2px dashed lightgray;
  background-image:
    url("https://heropy.blog/css/images/vendor_icons/html5.png");
  background-size: 150px;
  background-repeat: no-repeat;
  background-position: right bottom;
}

출력결과

1-2. 방향 중앙정렬

html

<div class="box"></div>

css

.box {
  width: 260px;
  height: 200px;
  border: 2px dashed lightgray;
  background-image:
    url("https://heropy.blog/css/images/vendor_icons/html5.png");
  background-size: 150px;
  background-repeat: no-repeat;
  background-position: center;
}

출력결과

 

2-1. px단위

html

<div class="box"></div>

css

.box {
  width: 260px;
  height: 200px;
  border: 2px dashed lightgray;
  background-image:
    url("https://heropy.blog/css/images/vendor_icons/html5.png");
  background-size: 150px;
  background-repeat: no-repeat;
  background-position: 100px 50px;
}

※ background-position: x축 y축이기 때문에 자세한 설정은 어렵다.

출력결과

2-2. %단위

html

<div class="box"></div>

css

.box {
  width: 260px;
  height: 200px;
  border: 2px dashed lightgray;
  background-image:
    url("https://heropy.blog/css/images/vendor_icons/html5.png");
  background-size: 100px;
  background-repeat: no-repeat;
  background-position: 100% 100%;
}

출력결과

※ 100% 100% 이면 width, height의 최대 길이보다 넘어가야하지 않나 라고 생각 할 수있는데 그 부분은 잘 고려해서 사용해야한다. 어렵다.

 

3. 단위와 방향의 혼합

html

<div class="box"></div>

css

.box {
  width: 260px;
  height: 200px;
  border: 2px dashed lightgray;
  background-image:
    url("https://heropy.blog/css/images/vendor_icons/html5.png");
  background-size: 100px;
  background-repeat: no-repeat;
  background-position: 100px bottom ;
}

출력결과

※ 혼합해서 background-position을 사용할 때에는 x축, y축 순서대로 사용해야 한다.
100px(x축) bottom(y축) 또는 left(x축) 100px(y축)