CSS background-image 속성
정의와 사용법
background-image 요소에 배경 이미지를 설정합니다.
요소의 배경은 요소의 전체 크기를 차지하며, 내간격과 테두리를 포함하지만, 마진을 제외합니다.
기본적으로 배경 이미지는 요소의 왼쪽 상단에 위치하며, 수평 및 수직 방향으로 반복됩니다.
힌트:가능한 배경 색상을 설정하면 배경 이미지가 사용되지 않더라도 페이지에 좋은 시각적 효과를 얻을 수 있습니다.
상세 설명
background-image 속성은 요소의 배경에 이미지를 설정합니다.
다음에 따라 background-repeat 속성 값에 따라, 이미지는 무한히 타일링될 수 있으며, x축 또는 y축에 따라 타일링될 수 있으며, 또는 전혀 타일링되지 않을 수 있습니다.
기본 배경 이미지(원본 이미지)은 다음과 같이 설정됩니다: background-position 속성 값이 위치합니다.
추가로 참조하십시오:
CSS 강의:CSS 배경、CSS 배경(고급)、CSS 그레이딩
HTML DOM 참조 설명서:backgroundImage 속성
예제
이미지를 페이지 배경으로 설정합니다:
body
{
background-image: url(bgimage.gif);
background-color: #000000;
}
CSS 문법
background-image: url|none|initial|inherit;
속성 값
속성 값
| 값 | 설명 |
|---|---|
| url('URL') | 이미지의 경로를 지정합니다. |
| none | 기본 값. 배경 이미지를 표시하지 않습니다. |
| inherit | 부모 요소에서 background-image 속성 설정을 상속해야 합니다. |
기술 세부 사항
| 기본 값: | none |
|---|---|
| thừa kế: | no |
| 버전: | CSS1 |
| JavaScript 문법: | object.style.backgroundImage="url(stars.gif)" |
브라우저 지원
표格에 표시된 숫자는 이 속성을 최초로 지원하는 브라우저 버전을 나타냅니다.
| 크롬 | 엣지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 크롬 | IE / 엣지 | 파이어폭스 | 사파리 | 오페라 |
| 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
