배경 스타일 (Background)

본 게시글은 개인 공부를 하면서 기록 목적으로 작성한 내용입니다.
잘못된 내용이 있다면 제보 부탁드립니다. 🙇‍♂️

---

1. Background Design

• 요소의 배경(background)은 요소의 content-box, padding-box, border-box 아래에 있는 영역이다. (margin-box 제외)
• 모던 브라우저에서는 배경을 차지하는 영역을 background-clip 속성을 사용하여 변경할 수 있다.

2. Background 속성

• background-color : 배경색을 설정할 수 있는 속성
• background-image : 요소의 배경에 표시할 배경 이미지를 지정하며, 이미지 또는 그레디언트 이미지를 사용한다.
• background-position : 배경이 요소 배경 안에 표시되어야 하는 위치를 설정한다.
  • 기본값 background-position: left top;이며, px , % 단위를 사용하여 위치를 지정할 수 있다.
• background-repeat : 배경을 반복할지 여부를 설정한다.
• background-attachment : 내용이 스크롤 될 때 요소의 배경 동작을 설정한다.
  • background-attachment: fixed; 스크롤 될 때 이미지 위치를 고정할 수 있다.
• background : 배경 속성을 모아 작성하는 속기법이다.
• background-size : 배경 이미지의 크기를 동적으로 조정할 수 있다.
• background-clip : 배경을 어디에 넣을지 정하는 속성이다. (기본값: border-box)
• background-origin : 배경 이미지를 어느 영역부터 채워나갈지를 정하는 속성이다.

3. 배경 속성 사용 예제

• 이미지 기본 비율을 지키면서 가운데로 배치 시키기

<!--HTML-->
...
<div class="img-cont">
  <div class="bg-image" />
</div>
...

/* CSS */
.img-cont {
    width: 500px;
    height: 300px;
    margin: 100px auto;
    border: 1px solid #bdbdbd;
    background-color: lightgray;
}

.bg-image {
    width: 100%;
    height: 100%;
    background: url("./images/IMG_0588.jpeg") no-repeat center center;
    background-size: contain;
}