CSS Backgrounds property

웹 페이지의 시각적 완성도를 결정하는 CSS 배경(Backgrounds) 속성에 대해 알아보겠습니다.

배경 속성은 단순히 색상을 칠하는 것을 넘어 이미지를 배치하고, 반복시키고, 고정하는 등 다양한 디자인적 효과를 제어합니다.

---

1. 개별 배경 속성들

배경을 세밀하게 제어하기 위한 주요 속성들입니다.

• background-color: 요소의 배경 색상을 지정합니다.
• background-image: 배경에 넣을 이미지 경로를 url() 함수로 지정합니다.
• background-repeat: 이미지의 반복 여부를 결정합니다. (repeat, no-repeat, repeat-x, repeat-y)
• background-position: 이미지의 시작 위치를 설정합니다. (top, center, bottom, left, right 또는 px, %)
• background-size: 이미지의 크기를 조절합니다.
  • cover: 비율을 유지하며 요소를 꽉 채웁니다. (이미지 일부가 잘릴 수 있음)
  • contain: 비율을 유지하며 이미지가 전체가 다 보이게 맞춥니다. (여백이 생길 수 있음)
• background-attachment: 스크롤 시 이미지의 고정 여부를 정합니다. (scroll, fixed)

---

2. 배경 축약 속성 (Shorthand)

여러 속성을 한 줄로 줄여서 쓸 수 있습니다. 가독성을 높이고 코드 길이를 줄이는 데 효과적입니다.

• 순서: color image repeat attachment position / size (사이즈는 위치 뒤에 /와 함께 써야 합니다.)

CSS

 

/* 축약형 예시 */
.hero-section {
  background: #000 url('bg.jpg') no-repeat fixed center / cover;
}

---

3. 다중 배경 (Multiple Backgrounds)

하나의 요소에 여러 개의 배경 이미지를 겹쳐서 사용할 수 있습니다. 먼저 쓴 이미지가 가장 위(사용자에게 가까운 쪽)에 배치됩니다.

CSS

 

.multi-bg {
  background-image: url('overlay.png'), url('base-photo.jpg');
  background-position: center, top left;
  background-repeat: no-repeat;
}

---

4. 배경 클립과 원점 (Clip & Origin)

배경이 어디까지 그려질지, 어디서부터 시작할지 결정합니다.

• background-clip: 배경이 테두리(border-box), 안쪽 여백(padding-box), 또는 콘텐츠(content-box) 중 어디까지 채워질지 정합니다.
• background-origin: 배경 이미지가 시작되는 기준점을 정합니다.

---

🖥️ 실전 예제 코드: "풀 스크린 배경 만들기"

화면 전체를 가득 채우면서 스크롤해도 고정되어 있는 배경 스타일입니다.

HTML

 

<style>
  .main-banner {
    width: 100%;
    height: 100vh; /* 화면 높이 전체 */
    
    /* 배경 설정 */
    background-color: #333;
    background-image: url('nature.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    
    /* 텍스트 정렬 (Flexbox 활용) */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 3rem;
  }
</style>

<div class="main-banner">
  Welcome to My World
</div>

---

📋 배경 주요 속성 요약표

속성	설명	주요 값 예시
background-color	배경색	red, #ffffff, rgba(0,0,0,0.5)
background-image	배경 이미지	url('image.jpg'), linear-gradient(...)
background-size	이미지 크기	cover, contain, 100% 50%
background-position	이미지 위치	center, bottom right, 50% 50%
background-clip	배경 적용 범위	border-box, padding-box, content-box

---

학습 정리

• **background-size: cover;**는 반응형 웹 디자인에서 이미지를 찌그러뜨리지 않고 영역을 채울 때 가장 많이 쓰이는 속성입니다.
• 배경 이미지 위에 글자가 잘 보이게 하려면 rgba()를 이용한 반투명한 색상이나 그라데이션 오버레이를 함께 사용하면 좋습니다.
• 이미지가 로드되지 않을 상황을 대비해 항상 유사한 **background-color**를 함께 지정하는 습관을 들이세요.

---

요소를 시각적으로 풍성하게 만드는 배경 속성을 정복하셨습니다!

---