background 속성

 

🟢   background

요소의 배경 색상, 이미지, 위치, 반복 방식 등을 설정하는 속성.

 

1️⃣ 개별 배경 속성

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

🔹 background-color

배경 색상 지정.

.box {
  background-color: #3498db;
}

• 색상 이름
• Hex Code (16진수 코드)
• RGB / RGBA
• HSL / HSLA

 

🔹 background-image

배경 이미지 경로 지정.

.box {
  background-image: url('image.jpg');
}

 

🔹 background-repeat

이미지 반복 여부.

.box {
  background-repeat: no-repeat;
}

• repeat: 반복. (기본값)
• no-repeat: 반복 없음.
• repeat-x: 가로 방향만 반복.
• repeat-y: 세로 방향만 반복.

 

🔹 background-position

배경 이미지 위치.

.box {
  background-position: center;
}

• left
• right
• top
• bottom
• center
• 또는 px, %

 

🔹 background-size

배경 이미지 크기.

.box {
  background-size: cover;
}

• cover: 비율 유지하며 꽉 채움. (이미지 일부가 잘릴 수 있다)
• contain: 비율 유지하며 이미지 전체 표시. (여백이 생길 수 있다)

 

🔹 background-attachment

스크롤 시 배경 고정 여부.

.box {
  background-attachment: fixed;
}

• scroll: 요소와 함께 스크롤. (기본값)
• fixed: 뷰포트(화면)에 고정.
• local: 요소 내부의 스크롤에 따라 움직임.

 

2️⃣  배경 클립과 원점 (Clip & Origin)

배경이 어디까지 그려질지(Clip)와, 어디서부터 시작할지(Origin) 기준 영역을 결정하는 속성.

🔹 background-clip

배경이 그려지는 범위를 설정.

.box. {
  background-clip: padding-box;
}

• border-box: 테두리까지 배경 채워짐. (기본값)
• padding-box: 패딩 영역까지만 배경 채워짐.
• content-box: 콘텐츠 영역까지만 배경 채워짐.

 

🔹 background-origin

배경 이미지의 시작 기준점을 설정.

.box. {
  background-origin: border-box;
}

• border-box: 테두리 기준으로 이미지 시작.
• padding-box: 패딩 영역 기준으로 이미지 시작. (기본값)
• content-box: 콘텐츠 영역 기준으로 이미지 시작.

 

3️⃣  다중 배경 (Multiple Backgrounds)

하나의 요소에 여러 개의 배경 이미지를 겹쳐서 사용할 수 있는 속성.

.multi-bg {
  background-image: url('overlay.png'), url('base-photo.jpg');
  background-position: center top, left center, right bottom;
  background-repeat: no-repeat, repeat-x, repeat-y;
  background-size: contain, cover, auto;
}

• 먼저 쓴 이미지가 맨 위(사용자에게 가까운 쪽)에 표시됨

 

🔨 축약형 속성 (Shorthand)

배경 속성을 한 줄로 정의하는 속성.

.shorthand {
  background: <color> <image> <repeat> <attachment> <position> / <size>;
}

• 문법: background: color url('img.jpg') repeat attachment position / size;
• 주의: <size> 는 <position> 뒤에 / 로 구분해야 한다.
• 필요 없는 속성은 생략 가능 (url('img.jpg'), no-repeat)

 

 

📍  POINT 📍 

✔️ background-size: cover; 는 반응형 웹 디자인에서 이미지를 찌그러뜨리지 않고 영역을 채울 때 가장 많이 쓰이는 속성이다. ✔️

✔️ 배경 이미지 위에 글자가 잘 보이게 하려면 rgba()를 이용한 반투명한 색상이나 그라데이션 오버레이를 함께 사용하면 좋다. ✔️

✔️ 이미지가 로드되지 않을 상황을 대비해 항상 유사한 background-color 를 함께 지정한다. ✔️

 

 

📋 배경 주요 속성 요약표📋

속성	설명	주요 값 예시
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

 

 

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

<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>

 

---

 

🔗 CSS Backgrounds training 🔗

https://www.w3schools.com/css/css_background.asp

W3Schools.com