CSS 기초(5) background

 

• background-color (배경색)
• background-image (이미지 넣기)
• background-repeat (반복 설정)
• background-position (위치)
• background-size (크기 조절)
• background-attachment (고정 여부)

​

1️⃣ background-color (배경색)

.box {

background-color: #f5f5f5;

}

​

색상 이름 / HEX / RGB / RGBA 모두 가능

✔ 투명한 배경 = transparent

​

2️⃣ background-image (배경 이미지 넣기)

​

.box {

background-image: url("image.jpg");

}

​

여러 장 가능

background-image: url("img1.png"), url("img2.png");

​

3️⃣ background-repeat (반복 여부)

이미지는 기본값이 반복(repeat)

​

background-repeat: no-repeat; 반복 없음

background-repeat: repeat-x; 가로만 반복

background-repeat: repeat-y; 세로만 반복

​

4️⃣ background-position (배경 위치)

background-position: center; 가운데

background-position: top; 위

background-position: bottom; 아래

background-position: left; 왼쪽

background-position: right; 오른쪽

​

두 축으로도 가능

background-position: right bottom;

background-position: 20px 30px; x:20px, y:30px

​

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

​

contain

요소 안에 “다 들어오게”

→ 여백 생길 수 있음

​

background-size: contain;

​

cover

요소를 “꽉 채우게”

→ 사진 일부 잘릴 수 있음

→ 실무에서 가장 많이 씀

​

background-size: cover;

​

직접 수치 지정

background-size: 100px 200px;

background-size: 100% 100%;

​

6️⃣ background-attachment (스크롤 고정)

scroll (기본값)

페이지와 함께 스크롤됨

background-attachment: scroll;

​

fixed (화면에 고정, 패럴랙스 느낌)

background-attachment: fixed;

→ 배경은 고정, 내용만 스크롤

→ “고정 배경” 효과 만들 때 필수

​

7️⃣ background 단축 속성

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

​

background: image repeat position / size;

​

예시

background: #fafafa url(bg.png) no-repeat right bottom / contain;

​

​

속성	의미	가장 많이 쓰는 값
background-color	배경색	#eee, rgba()
background-image	이미지	url()
background-repeat	반복	no-repeat
background-position	위치	center, right bottom
background-size	크기	cover, contain
background-attachment	고정	fixed

​