Properties

Properties

Editing
  • account_tree
  • bug_report

background-image

선택자를 갖는 요소에 배경 이미지를 설정한다.

설명

CSS 3.0에서는 두 개 이상의 배경 설정이 가능하다.

사용 가능한 값 타입

〈bg-image〉

<'background-image'> 속성에 사용되는 값의 타입이다.  url() 함수를 사용해서 2차원 이미지를 설정하거나 그라디언트를 설정할 수 있다. 다중 배경인 경우 콤마로 구분된 연속된 값을 가질 수 있다.

  • <image> | none
    CSS Backgrounds and Borders Module Level 3

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

  • 〈gradient〉

    두 가지 이상의 색상 간 점진적인 전환으로 구성된 특수한 유형의 이미지를 나타낸다.

    • background: linear-gradient(to right, #FF0000, #00FF00, #FFFF00);

      선형 그라데이션

    • background: radial-gradient(#FF0000, #00FF00, #FFFF00);

      원형 그라데이션

  • 〈image〉

    2차원 이미지를 나타낸다.

관련 함수들

  • url()

    CSS에서 사용할 외부 리소스를 가져온다.

일반적으로 사용되는 값

다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

  • none

    어떠한 값도 설정하지 않음을 나타낸다.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

  • noneCSS1

    배경 이미지를 설정하지 않는다.

  • url(path)CSS1

    url 함수를 이용해서 배경 이미지의 경로를 설정할 수 있다.

구문

  • background-image 〈image〉 | 〈gradient〉;CSS1

    배경 이미지의 경로를 설정하거나 없음으로 처리할 수 있다.

  • background-image url('bg1.png'), url('bg2.png');CSS3

    두 개 이상의 배경 이미지를 콤마(,)로 구분하여 설정한다. 배경이 쌓이는 순서는 작성 순서에 따라 위에서 아래로 적용된다. 즉 맨 마지막의 설정 값이 맨 아래의 배경으로 설정되어진다.

    두 개 이상의 배경 이미지를 설정한다.
  • background-image linear-gradient | radial-gradient | repeating-linear-gradient | repeating-radial-gradient;CSS3

    배경 이미지로 그라데이션을 설정한다.

    배경 이미지로 그라디언트를 설정할 수 있다.
  • object.style.backgroundImage="url('bg.gif')";CSS1

    자바스크립트 형식

지원 웹브라우저