Properties

Properties

Editing
  • account_tree
  • bug_report

background-image

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

설명

CSS Backgrounds and Borders Module Level 3에서는 한 개 이상의 배경 설정이 가능하다.

사용 가능한 값 타입

<'background-image'>

DEVDIC-Specified Data Types

background-image 속성 값을 나타낸다. 다중 배경인 경우 콤마로 구분된 연속된 값을 가질 수 있다.

  • CSS Backgrounds and Borders Module Level 3
    <bg-image>#

포함된 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <bg-image>

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

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

    포함된 타입

    • <gradient>

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

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

        선형 그라데이션

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

        원형 그라데이션

        Example
      Details

      관련 함수

      모든 함수를 표시하지 않을 수도 있다.

      동일한 타입을 사용하는 관련 속성

      모든 속성을 표시하지 않을 수도 있다.

      • background

        요소의 배경과 관련된 모든 속성을 한 번에 설정하는 속기 속성이다.

    • <image>

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

      • CSS Images Module Level 4
        <url> | <image()> | <image-set()> | <cross-fade()> | <element()> | <gradient>

        <url>로 외부의 리소스를 연결하거나 <image-set()>, <cross-fade()>, <element()> 값으로 생성된다. 또한 그라디언트도 가능하다.

        현재 image()는 지원하지 않는다.

      Details

      포함된 타입

      • <gradient>

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

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

          선형 그라데이션

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

          원형 그라데이션

          Example
        Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
        타입에 대한 자세한 설명은 다음 링크를 참조하라.[<gradient>]
      • <url>

        이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.

        • CSS Values and Units Module Level 4
          <url()> | <src()>
        Details

        포함된 타입

        • <src()>

          src() 함수의 매개변수를 나타낸다.

          • CSS Values and Units Module Level 4
            src( <string> <url-modifier>* )
          Details

          포함된 타입

          • <string>

            따옴표로 감싸진 데이터 유형을 표현한다.

            • "this is a 'string'."
            Details

            동일한 타입을 사용하는 관련 속성

            모든 속성을 표시하지 않을 수도 있다.

            • font-family

              글꼴을 지정한다.

            • content

              가상 요소로 생성할 콘텐츠를 설정한다.

            • quotes

              인용 부호의 유형을 설정한다.

          • <url-modifier>

            URL의 의미나 해석을 어떻게든 변경하는 타입이다.

        • <url()>

          url() 함수의 매개변수를 나타낸다.

          • CSS Values and Units Module Level 4
            url( <string> <url-modifier>*| <url-token>
          Details

          포함된 타입

          • <url-token>

            URL Token Railroad Diagrams

            <ident-token "url"> ( ws* not " ' ( ) \ ws or non-printable escape ws* )
          • <string>

            따옴표로 감싸진 데이터 유형을 표현한다.

            • "this is a 'string'."
            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<string>]
          • <url-modifier>

            URL의 의미나 해석을 어떻게든 변경하는 타입이다.

            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<url-modifier>]

        관련 함수

        모든 함수를 표시하지 않을 수도 있다.

        동일한 타입을 사용하는 관련 속성

        모든 속성을 표시하지 않을 수도 있다.

        • clip-path

          요소의 클리핑 범위를 설정한다.

      관련 함수

      모든 함수를 표시하지 않을 수도 있다.

    관련 함수

    모든 함수를 표시하지 않을 수도 있다.

    공통적으로 사용되는 값

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

    • none

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

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

구문

  • background-image: #CCCCCC;
    CSS1

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

  • background-image: url('bg1.png'), url('bg2.png');
    CSS Backgrounds and Borders Module Level 3

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

    두 개 이상의 배경 이미지를 설정한다.
  • background-image: linear-gradient(#CCC, #FFF);
    CSS Backgrounds and Borders Module Level 3

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

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

    자바스크립트 형식

버전 명세

Modules
Module NameStatusSummary
CSS Backgrounds and Borders Module Level 3

Last review date: 2022-7-9

지원 웹브라우저