배경 이미지 넣기
background-image는 요소의 콘텐츠, padding, 테두리 뒤에 이미지를 그려요. 기본적으로 padding 상자의 왼쪽 위 모서리에서 시작하고, 원래 크기를 유지하며, 상자를 채우도록 반복돼요.
실제 프로젝트에서는 url()이 파일을 가리켜요. url("images/hero.jpg")처럼요. 경로는 그 코드가 들어 있는 스타일시트 기준이에요(<style> 요소라면 페이지 기준). 이 페이지의 예제는 어디서든 실행되도록 작은 SVG 이미지를 data: URL로 직접 적었어요.
처음부터 알아 둘 두 가지가 있어요.
- 배경은 요소에 크기를 주지 않아요. 배경 이미지가 있는 빈
div의 높이는 0px이에요. 콘텐츠, padding,height,aspect-ratio중 하나를 주세요. - 배경 이미지는 장식이에요. 스크린 리더는 건너뛰고, 대체 텍스트도 없어요. 의미를 담은 이미지는
<img>요소에 넣어야 해요.
background-size: cover, contain, 길이
background-size는 이미지 크기를 조절해요. 두 키워드는 비율을 유지해요.
이미지는 너비가 높이의 두 배이고, 각 상자는 정사각형이에요.
| 값 | 결과 |
|---|---|
auto (기본값) | 이미지 원래 크기 |
cover | 상자가 완전히 찰 때까지 키우고, 넘치는 부분은 잘려요 |
contain | 이미지 전체가 들어갈 때까지 키우고, 두 변에 회색 띠가 남아요 |
200px | 너비 200px, 높이는 비율에 맞게 |
50% auto | 상자 너비의 절반, 높이는 비율에 맞게 |
100% 100% | 정확히 상자 크기. 비율이 다르면 이미지가 찌그러져요 |
히어로 배너와 카드에는 보통 cover를 골라요. contain은 절대 잘리면 안 되는 로고와 일러스트용이에요.
background-position과 background-repeat
background-position은 키워드(top, center, bottom, left, right), 퍼센트, 길이로 상자 안에서 이미지 위치를 정해요. background-repeat는 반복을 제어해요. 값을 넣어 보세요.
위치에는 top right, bottom 10px right 20px, 25% 75%를, 반복에는 repeat-x, repeat-y, space(잘리는 타일이 없도록 틈을 두고 반복), round(정수 개가 들어가도록 타일 크기를 조절)를 넣어 보세요.
레이어: 여러 배경과 텍스트 오버레이
background-image는 쉼표로 구분한 목록을 받아요. 첫 번째 레이어가 맨 위에 그려져요. 흔한 용도는 사진 위에 반투명 그라데이션을 올려 흰 텍스트를 읽기 좋게 하는 거예요.
aspect-ratio가 빈 상자에 높이를 주고, background-size: cover는 두 레이어 모두에 적용돼요. 그라데이션 예제가 더 필요하면 CSS 그라데이션을 보세요.
background 단축 속성
background는 모든 배경 속성을 한 줄로 정해요. size는 position 바로 뒤에 슬래시로 구분해서 오고, 색은 마지막 레이어에 들어가요.
.hero {
background: url("hero.jpg") center / cover no-repeat, #1f2937;
}
/* the same as */
.hero {
background-image: url("hero.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-color: #1f2937;
}
대체 색은 이미지가 로드되는 동안, 그리고 로드에 실패했을 때 보여요. 단축 속성에서 빠뜨린 속성은 모두 기본값으로 초기화되니, 단축 속성을 먼저 쓰고 개별 속성을 그 뒤에 쓰세요.
다른 배경 속성들
| 속성 | 하는 일 |
|---|---|
background-attachment: fixed | 페이지를 스크롤해도 이미지가 제자리에 있어요(iOS Safari에서는 무시돼요) |
background-origin | 위치가 border, padding, content 중 어느 가장자리에서 시작하는지 |
background-clip | 배경을 칠하는 범위, 글자를 채우는 text 포함 |
background-blend-mode | multiply처럼 레이어를 섞어요 |
자주 하는 실수
- 잘못된 경로. 스타일시트의
url()은 HTML 페이지가 아니라 CSS 파일 기준이에요. - 빈 요소. 높이가 없어서 이미지가 보일 곳이 없어요.
contain이나 작은 이미지에no-repeat빠뜨리기. 타일처럼 반복돼요.cover를 뜻했는데100% 100%로 늘리기.- 중요한 이미지를 배경으로 쓰기. 콘텐츠는 대체 텍스트가 있는
<img>를 쓰세요. 배경은 스크린 리더에 보이지 않아요. - 공백이나 따옴표가 든
data:URL에 따옴표 빠뜨리기. 항상url("...")로 쓰세요.
자주 묻는 질문
CSS로 배경 이미지는 어떻게 넣나요?
요소에 background-image: url("photo.jpg");를 써요. 경로는 CSS 파일 기준이에요(style 속성이나 <style> 요소라면 페이지 기준). 배경은 빈 요소를 절대 키우지 않으니 요소에 크기를 주세요.
배경 이미지가 요소 전체를 덮게 하려면 어떻게 하나요?
background-size: cover;와 background-position: center;를 함께 쓰세요. 이미지가 비율을 유지하면서 상자를 완전히 채우도록 커지고, 넘치는 부분은 잘려요.
cover와 contain은 무엇이 다른가요?
cover는 상자 전체를 채우고 들어가지 않는 부분을 잘라요. contain은 이미지 전체를 보여 주고, 비율이 다르면 두 변에 빈 공간을 남겨요.
배경 이미지가 반복되지 않게 하려면 어떻게 하나요?
background-repeat: no-repeat;를 추가하세요. 기본적으로 배경 이미지는 요소를 채우도록 양방향으로 타일처럼 반복돼요.
배경 이미지가 보이지 않는 이유는 무엇인가요?
흔한 원인은 url()의 잘못된 경로(CSS 파일 기준이에요), 콘텐츠가 없어서 높이가 없는 요소, 이미지를 초기화한 뒤쪽의 background 단축 속성이에요.
