CSS에서 background 이미지를 비율을 유지한채 사이즈만 줄여보자

안녕하세요, 

 

오늘은 CSS에서 background 이미지를 비율을 유지한채 사이즈만 줄여보도록 하겠습니다.

 

background: url('image.jpg') no-repeat center center / 50px 50px / content-box border-box;

위의 구문을 해석 할 수 있다면 굳이 해당 포스팅을 안보셔도 됩니다.

 

그렇지 않다면 같이 자세히 알아봅시다.

 

CSS의 background 속성에서 '/'를 추가하여 아래와 같은 양식으로 

배경 이미지의 위치, 크기, 배경 영역에 채우는 방식을 조절할 수 있습니다.

 

background: <position> / <size> / <background-origin> <background-clip>;

 

예시를 들어 값을 적용시켜보겠습니다.

  background: url('image.jpg') no-repeat center center / 50px 50px / content-box border-box;

 

위 구문의 의미를 해석해 보면:

 

1. ('image.jpg') : image.jpg 이미지를 백그라운드이미지로 가져온다. 
2. no-repeat: 이미지를 반복하지 않습니다.
3. center center: 이미지를 수평 및 수직으로 중앙에 배치합니다.
4. 10px auto: 이미지를 너비 10px, 높이는 비율에 맞춰 자동 조절합니다.
5. content -box: 배경 이미지가 content-box를 기준으로 시작합니다.
6. border-box: 배경이 border-box 영역까지 채워집니다.

여기서 background-origin은 이미지의 기준 시작 위치를 설정하고, background-clip은 배경이 채워지는 최대 영역을 지정하는 역할을 합니다.

 

 

좀더 상세 예시로 background-origin과 background-clip의 차이를 알아보겠습니다.

 

.box1 {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 10px solid #333;
  background: url('image.jpg') no-repeat center center / 50px 50px / content-box border-box;
}

.box2 {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 10px solid #333;
  background: url('image.jpg') no-repeat center center / 50px 50px / border-box content-box;
}

 

 

- 설명

1. box1 예시 (content-box border-box)
   • background-origin: content-box: 배경 이미지가 content-box를 기준으로 시작됩니다. 즉, padding 안쪽 영역인 내용 영역에서 배경이 시작됩니다.
   • background-clip: border-box: 배경이 border-box까지 확장되어, 테두리 영역까지 배경이 채워집니다.
2. box2 예시 (border-box content-box)
   • background-origin: border-box: 배경 이미지가 border-box를 기준으로 시작됩니다. 즉, 테두리 바깥쪽에서 배경이 시작됩니다.
   • background-clip: content-box: 배경이 content-box까지만 표시되어, 내용 영역까지만 배경이 채워집니다.

- 결과 차이

• box1의 경우, 배경 이미지가 내용 영역에서 시작되지만 테두리 영역까지 배경이 채워집니다.
• box2의 경우, 배경 이미지가 테두리 영역부터 시작하지만, 내용 영역까지만 표시되어 테두리나 패딩 부분은 비어 있게 됩니다.

이렇게 content-box와 border-box 설정을 통해 배경 이미지가 어디서 시작되고 어디까지 채워질지 세밀하게 조절할 수 있습니다.

 

감사합니다.