background-image 속성의 이해

background-image 속성은 요소의 배경 이미지를 지정합니다.

배경 이미지는 한 개 또는 여러 개를 겹쳐서 사용할 수 있으며,
이미지 파일이나 그라디언트를 배경 이미지로 사용할 수 있습니다.

형식 구문

CSS 
selector {
    background-image: /* value */
}

구문

CSS background-image 속성 값 예시 
/* 키워드 값 */
background-image: none; /* 배경 이미지 없음 */

/* 한 개의 배경 이미지 */
background-image: url("bg-example.jpg"); /* 이미지 파일 */
background-image: linear-gradient(red, blue); /* 그라디언트 */

/* 여러 개의 배경 이미지(겹쳐서 사용) */
background-image: url("bg-example-1.jpg"), url("bg-example-2.jpg");
background-image: linear-gradient(red, blue), url("bg-example-1.jpg"), url("bg-example-2.jpg");

/* 글로벌 값 */
background-image: inherit;
background-image: initial;
background-image: revert;
background-image: revert-layer;
background-image: unset;

형식 정의

background-image 속성의 형식 정의
초깃값 none
적용 요소 모든 요소
상속 아니오
애니메이션 아니오

값

color 속성 값
none 이미지가 없음을 나타내는 키워드 값입니다.
url("이미지 경로") 배경 이미지으로 사용할 이미지 파일의 경로입니다.
그라디언트 배경 이미지로 사용할 그라디언트입니다.
CSS에서 사용할 수 있는 그라디언트 유형은 다음과 같습니다.
  • conic-gradient() - 배경 이미지로 원뿔형 그라디언트를 설정합니다. 최소 두 가지 색상을 정의해야 합니다.
  • linear-gradient() - 배경 이미지로 선형 그라디언트를 설정합니다. 최소 두 가지 색상을 정의해야 합니다.
  • radial-gradient() - 배경 이미지로 방사형 그라디언트를 설정합니다. 최소 두 가지 색상을 정의해야 합니다.
  • repeating-conic-gradient() - 배경 이미지로 반복적인 원뿔형 그라디언트를 설정합니다.
  • repeating-linear-gradient() - 배경 이미지로 반복적인 선형 그라디언트를 설정합니다.
  • repeating-radial-gradient() - 배경 이미지로 반복적인 방사형 그라디언트를 설정합니다.
image-set() image-set() 함수형 표기법으로 브라우저가 높은 해상도를 위해 주어진 이미지 집합 안에서 가장 적합한 CSS를 선택하도록 할 수 있는 방법입니다. MDN - image-set()을 참조하세요.

여러 개의 값을 사용하는 방법

background-image 속성은 배경 이미지를 한 개 또는 여러 개를 겹쳐서 사용할 수 있습니다.
여러 개의 배경 이미지를 사용하려면, 여러 개의 값을 쉼표(,)로 구분하여 지정할 수 있습니다. 각 값은 별도의 배경 이미지로 간주되며, 왼쪽에서 오른쪽 순서대로 윗쪽에서 아랫쪽으로 겹쳐서 표시됩니다. 예를 들어, 맨 처음에 지정한 배경 이미지가 가장 윗쪽에서 표시되고 맨 마지막에 지정한 배경 이미지가 가장 아랫쪽에서 표시됩니다.

CSS 여러 개의 값을 사용하는 방법 
selector {
    background-image: linear-gradient(red, blue), url("bg-example-1.jpg"), url("bg-example-2.jpg");
}

예제

다음의 예제들을 통해서 background-image 속성의 사용법에 대해 살펴보겠습니다.

한 개의 배경 이미지

한 개의 이미지 파일이나 그라디언트를 사용하는 예제입니다.

한 개의 이미지 파일
HTML 
<div>background-image</div>
CSS 
div {
    height: 200px;
    border: 10px dashed violet;
    background-image: url("heart.png");
}
실제 적용된 모습

'실제 적용된 모습'처럼 배경 이미지의 렌더링 세부 사항은 다음과 같습니다.

  • 원본 이미지 파일 사이즈가 그대로 랜더링됩니다. 이미지 파일 사이즈는 background-size 속성으로 지정할 수 있습니다.
  • 원본 이미지 파일 사이즈가 배경 영역보다 작을 경우에는 위아래 좌우로 반복해서 랜더링됩니다. 배경 이미지의 반복 유무는 background-repeat 속성으로 지정합니다.
  • 원본 이미지 파일 사이즈가 배경 영역보다 클 경우에는 배경 영역 보다 큰 이미지 영역이 클리핑(오려냄, clipping)됩니다.
한 개의 그라디언트
HTML 
<div>background-image</div>
CSS 
div {
    height: 200px;
    border: 10px dashed violet;
    background-image: linear-gradient(red, blue);
}
실제 적용된 모습

여러 개의 배경 이미지

여러 개의 배경 이미지를 사용하는 예제입니다.
여러 개의 배경 이미지를 사용하려면, 여러 개의 값을 쉼표(,)로 구분하여 지정할 수 있습니다.

각 값은 별도의 배경 이미지로 간주되며, 왼쪽에서 오른쪽 순서대로 윗쪽에서 아랫쪽으로 겹쳐서 표시됩니다. 예를 들어, 맨 처음에 지정한 배경 이미지가 가장 윗쪽에서 표시되고 맨 마지막에 지정한 배경 이미지가 가장 아랫쪽에서 표시됩니다.

여러 개의 이미지 파일
HTML 
<div>background-image</div>
CSS 
div {
    height: 200px;
    border: 10px dashed violet;
    background-image: url("heart.png"), url("pattern.jpg");
}
실제 적용된 모습
여러 개의 그라디언트
HTML 
<div>background-image</div>
CSS 
div {
    height: 200px;
    border: 10px dashed violet;
    background-image: linear-gradient(rgba(0, 0, 255, 0.1), rgba(255, 255, 0, 0.1)),
                      radial-gradient(green, pink);
}
실제 적용된 모습
이미지와 그라디언트 조합
HTML 
<div>background-image</div>
CSS 
div {
    height: 200px;
    border: 10px dashed violet;
    background-image: url("heart.png"),
                      linear-gradient(green, blue);
}
실제 적용된 모습

background-image 속성의 렌더링 세부 사항

background-image 속성은 요소의 배경 이미지을 지정하는 기본 속성이지만, 다양한 다른 CSS 속성이나 요소와 결합될 때 예상치 못한 방식으로 렌더링될 수 있습니다.

border, background-color, background-clip 속성과의 관계를 중심으로 background-image의 렌더링 방식을 설명합니다.

border와 background-image 렌더링 순서

background-image는 border 뒤쪽에 렌더링되므로, 테두리가 있는 요소의 경우 배경 이미지가 border로 설정한 테두리 뒤에 표시됩니다.

예제
CSS 
div {
    height: 200px;
    border: 10px dashed violet;
    background-image: url("heart.png"),
                      linear-gradient(green, blue);
}
실제 적용된 모습

background-image와 background-color 렌더링 순서

background-color는 요소의 배경색을 지정하는 속성입니다.

background-image 속성이 설정된 경우, background-color는 그 뒤에 렌더링됩니다. 이 때문에 배경색은 이미지나 그라디언트가 일부 투명하거나 설정된 크기가 작을 때만 보일 수 있습니다.

HTML 
<div>background-image</div>
CSS 
div {
    height: 200px;
    border: 10px dashed violet;
    background-color: yellow;
    background-image: url("heart.png");
}
실제 적용된 모습

background-clip을 사용한 배경 영역 조정

background-clip 속성은 요소의 배경(색상이나 이미지)이 어느 부분까지 차지할 지를 설정합니다.
border-box, padding-box, content-box, text 중 하나를 선택하여 배경이 차지(클리핑(오려냄), clipping)할 영역으로 지정합니다.

데모 HTML 
<div>codingEverybody</div>
데모 CSS 
div {
    font-size: 2em;
    font-weight: 900;
    text-align: center;
    padding: 30px;
    border: 10px dashed red;
    background-image: url("flower.jpg");
    background-position: center;
    background-clip: border-box; /* 초깃값 */
}
데모 적용해 보기: background-clip 데모 버튼을 클릭해 보세요!

접근성 고려사항

스크린 리더 및 보조 기술을 사용하는 사람들에게 브라우저는 배경 이미지에 대한 어떠한 정보도 제공하지 않습니다.
배경 이미지에 페이지의 전반적인 목적을 이해하는 데 중요한 정보가 포함되어 있는 경우에는 사용하지 말아야 합니다. 배경 이미지를 대체할 수 있는 다른 수단을 고려해야 합니다.

또한, 시력이 약한 사람도 페이지 내용을 읽을 수 있을 만큼 배경 이미지와 전경 텍스트 간의 대비율이 충분히 높은지 확인하는 것도 중요합니다. 대개 텍스트가 배경과 충분히 구별되도록 대비 비율이 4.5:1 이상이어야 합니다. 이는 WCAG(웹 콘텐츠 접근성 지침)에서 권장하는 기준입니다.

WCAG(Web Content Accessibility Guidelines)

WCAG(Web Content Accessibility Guidelines, 웹 콘텐츠 접근성 가이드라인)는 웹 콘텐츠를 누구나 접근하고 사용할 수 있도록 하는 기술적인 지침입니다. 장애 유형이나 기술적 제약 없이 모든 사람이 웹 콘텐츠를 동등하게 이용할 수 있도록 보장하는 것이 목표입니다.

브라우저 호환성

background-image 속성의 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
background-image 1 12 1 1
그라디언트 1 12 3.6 4
image-set() 113 113 89 17
여러 개의 값 1 12 3.6 1.3
SVG 이미지 8 12 4 5

명세서

background-image 속성의 명세서 사양
명세서 사양
background-image CSS Backgrounds and Borders Module Level 3
#background-image

참고문헌

같이 보기