2.1 background-position 속성
CSS에서 background-position 속성은 요소 내의 배경 이미지의 시작 위치를 설정하는 데 사용돼. 이 속성은 배경 이미지가 요소 내에서 어디에 위치할지를 정확하게 정할 수 있게 도와줘. background-position 속성을 사용하면 배경 이미지를 섬세하게 조정하고 더 복잡한 디자인을 만들 수 있어.
background-position 문법
background-position 속성은 배경 이미지의 수평 및 수직 위치를 나타내는 두 가지 값을 받아:
background-position: 가로-위치 세로-위치;
하나의 값만 지정하면, 두 번째 값은 기본적으로 center로 간주돼.
수평 및 수직 위치 값들은 다음과 같이 지정될 수 있어:
- 키워드:
left: 왼쪽 정렬center: 가운데 정렬right: 오른쪽 정렬top: 위쪽 정렬bottom: 아래쪽 정렬
- 백분율 값:
- 예를 들어, 50% 50%는 이미지를 가운데에 위치시켜
- 백분율 값은 이미지가 아닌 요소의 크기에 대해 적용돼
- 픽셀 값:
- 예를 들어, 10px 20px는 이미지를 왼쪽 가장자리에서 10픽셀, 위쪽 가장자리에서 20픽셀 떨어진 위치에 배치해
- 값의 조합:
- 키워드와 백분율 값을 조합할 수 있어, 예를 들어 left 50%
2.2 키워드
키워드:
left,center,right: 수평 정렬top,center,bottom: 수직 정렬
키워드 사용 예제
이미지가 왼쪽 위 구석에 위치해:
CSS
div {
background-image: url('path/to/image.jpg');
background-position: left top; /* 이미지를 왼쪽 위 구석에 위치시켜 */
}
이미지가 가운데에 위치해:
CSS
div {
background-image: url('path/to/image.jpg');
background-position: center center; /* 이미지를 가운데에 위치시켜 */
}
이미지가 오른쪽 아래 구석에 위치해:
CSS
div {
background-image: url('path/to/image.jpg');
background-position: right bottom; /* 이미지를 오른쪽 아래 구석에 위치시켜 */
}
2.3 백분율
백분율 값은 요소 크기를 기준으로 이미지의 위치를 지정해.
백분율 사용 예제
이미지가 가운데에 위치해:
CSS
div {
background-image: url('path/to/image.jpg');
background-position: 50% 50%; /* 이미지를 가운데에 위치시켜 */
}
이미지가 왼쪽 위 구석에 위치해:
CSS
div {
background-image: url('path/to/image.jpg');
background-position: 0% 0%; /* 이미지를 왼쪽 위 구석에 위치시켜 */
}
이미지가 오른쪽 아래 구석에 위치해:
CSS
div {
background-image: url('path/to/image.jpg');
background-position: 100% 100%; /* 이미지를 오른쪽 아래 구석에 위치시켜 */
}
2.4 절대 단위 (px, em, rem)
픽셀 또는 다른 절대 단위 값은 이미지의 위치를 정확하게 지정할 수 있게 해줘.
이미지가 가운데에 위치해:
CSS
div {
background-image: url('path/to/image.jpg');
background-position: 10px 20px; /* 이미지를 왼쪽 위에서 10픽셀 오른쪽, 20픽셀 아래로 위치시켜 */
}
div {
background-image: url('path/to/image.jpg');
background-position: 2em 3em; /* 이미지를 2em 오른쪽, 3em 아래로 위치시켜 */
}
2.5 값의 조합
더 정확한 위치 설정을 위해 키워드와 절대 단위를 조합할 수 있어.
값의 조합:
CSS
div {
background-image: url('path/to/image.jpg');
background-position: left 20px top 10px; /* 이미지를 왼쪽 위에서 20픽셀 오른쪽, 10픽셀 아래로 위치시켜 */
}
GO TO FULL VERSION