[CSS] #07 스타일 속성, CSS 배경 속성 완전 정리! background-color부터 background-image까지 한 번에 끝내기

 

 

안녕하세요, 토스트데브입니다!
오늘은 웹 요소의 배경을 꾸미는 데 사용하는 CSS의 background 속성을 알아보겠습니다.

텍스트만으로는 심심한 웹페이지도, 배경색이나 배경 이미지를 적절히 사용하면 훨씬 시각적으로 풍부해지고 전문적으로 보입니다.

자, 그럼 배경 속성 하나하나 함께 살펴볼까요?

 

 

1️⃣ background-color – 배경 색상

요소의 배경에 색을 지정합니다.

div {
  background-color: lightblue;
}

• 색상값은 이름, 16진수, rgb, rgba, hsl 등 다양한 방식으로 표현 가능

background-color: #f0f0f0;
background-color: rgba(0, 0, 0, 0.5); /* 반투명 검정 */

 

 

2️⃣ background-image – 배경 이미지 설정

요소의 배경에 이미지를 설정합니다.

div {
  background-image: url("images/bg.jpg");
}

• 외부 이미지 URL도 가능:

background-image: url("https://example.com/bg.png");

 

 

3️⃣ background-repeat – 이미지 반복 여부

배경 이미지가 요소 크기에 맞춰 반복될지를 지정합니다.

값	설명
repeat	가로+세로 반복 (기본값)
no-repeat	반복 없음
repeat-x	가로 반복
repeat-y	세로 반복

div {
  background-repeat: no-repeat;
}

 

 

4️⃣ background-position – 이미지 위치 지정

배경 이미지의 시작 위치를 지정합니다.

div {
  background-position: center top;
}

 

예시	설명
left top	왼쪽 상단
center center	가운데
right bottom	오른쪽 하단
50% 50%	상대 위치 지정

 

 

5️⃣ background-size – 이미지 크기 조절

배경 이미지의 크기를 지정합니다.

값	설명
auto	원래 크기 (기본값)
cover	요소 전체를 채우도록 확대/축소
contain	요소 안에 이미지가 완전히 들어가도록 맞춤
100px 50px	너비 100px, 높이 50px

div {
  background-size: cover;
}

💡 cover는 꽉 채우고 잘림 가능, contain은 여백이 생겨도 전부 보임

 

 

6️⃣ background-attachment – 스크롤 고정 여부

스크롤 시 배경이 고정되는지 여부를 지정합니다.

값	설명
scroll	일반 스크롤과 함께 이동 (기본값)
fixed	배경 이미지 고정
local	요소 내부 스크롤과 함께 이동

div {
  background-attachment: fixed;
}

💡 fixed는 패럴럭스(parallax) 느낌의 배경 효과를 줄 때 사용됩니다.

 

 

7️⃣ background – 배경 속성 단축 작성

위의 속성들을 한 줄로 간단히 작성할 수 있습니다.

div {
  background: url("bg.jpg") no-repeat center/cover fixed #000;
}

구성 순서:

background: [color] [image] [repeat] [position]/[size] [attachment];

예:

background: #f0f0f0 url("bg.jpg") no-repeat center center/cover;

 

 

✅ 배경 속성 실전 예시

.banner {
  background-image: url("banner.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

이렇게 하면, 배경 이미지는 전체 영역을 꽉 채우고 가운데 정렬되며 스크롤에도 고정됩니다.

 

 

📌 반응형 디자인에서의 배경 사용 팁

• 고정 배경 이미지 사용 시, 모바일에서는 background-attachment: fixed가 지원되지 않을 수 있음
• 너무 큰 이미지 사용은 로딩 속도에 영향을 줄 수 있음 (웹 최적화 필요)
• cover와 center 조합은 가장 많이 쓰이는 기본 패턴

 

 

✅ 정리하며…

CSS의 배경 속성은 시각적으로 매력적인 웹페이지를 만들기 위한 핵심 스타일링 도구입니다.
텍스트 위에 자연스럽게 배경을 입히거나, 섹션별 분위기를 연출할 때 아주 유용하게 사용됩니다.
꼭 하나씩 실습해보면서 감각을 익혀보세요!

 

#CSS배경 #background속성 #backgroundColor #backgroundImage #웹디자인기초 #웹스타일링 #프론트엔드기초 #배경이미지설정 #배경색상 #CSS기초