Properties

Properties

Editing
  • account_tree
  • bug_report

background-attachment

선택자 요소에 배경으로 설정된 이미지를 스크롤 또는 고정 여부를 설정한다.

설명

'scroll'로 설정된 경우에는 콘텐츠와 함께 배경 이미지도 함께 스크롤 된다. 'fixed'로 설정된 경우에는 배경 이미지는 그대로 고정되고 콘텐츠만 스크롤 된다. 이와 같은 설정은 보통은 <body>에게 적용되는 경우이며 일반 요소에게 적용하는 경우는 다르다.

일반 요소에게 콘텐츠가 스크롤되도록 설정이 되어 있다면 적용된 배경 이미지는 기본적으로 고정된다. 하위 콘텐츠와 함께 적용된 배경 이미지가 스크롤 되기를 원한다면 local 값을 설정해야 한다.

만약에 하위 요소들에게 배경 이미지가 설정되어 있고 각각 fixed로 고정되어 있다면 해당 하위 요소의 배경 이미지는 스크롤 되는 상위 컨테이너에게 고정되어 있으므로 스크롤시 독특한 효과가 나타나기도 한다.

사용 가능한 값 타입

<'background-attachment'>

DEVDIC-Specified Data Types

background-attachment 속성에 사용하는 값을 나타낸다. 다중 배경인 경우 콤마로 구분된 연속된 값을 가질 수 있다.

  • CSS Backgrounds and Borders Module Level 3
    <attachment>#

포함된 타입

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

  • <attachment>

    배경 이미지가 지정된 경우 뷰포트로 부터 고정(fixed), 스크롤(scroll) 또는 콘텐츠와 함께 스크롤(local)할지를 나타내는 타입이다. 다중 배경인 경우 콤마로 구분된 연속된 값을 가질 수 있다.

    • CSS Backgrounds and Borders Module Level 3
      scroll | fixed | local
    Details

    사용되는 키워드

    • fixed

      뷰포트에 고정을 시킨다.

    • local

      요소에게 적용된 배경 이미지가 요소의 콘텐츠와 함께 스크롤 된다.

    • scroll

      CSS1.0

      기본 값이며 요소와 함께 배경을 스크롤한다.

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

  • 〈attachment〉scroll
    CSS1.0

    기본 값이며 요소와 함께 배경을 스크롤한다.

  • CSS1

    뷰포트에 고정을 시킨다.

    Example
  • CSS Backgrounds and Borders Module Level 3

    요소에게 적용된 배경 이미지가 요소의 콘텐츠와 함께 스크롤 된다.

    body가 아닌 요소에게 배경 이미지를 적용시 스크롤 영역이 생기더라도 고정된다. 그러나 local을 지정하면 콘텐츠와 함께 스크롤된다.

    Example

구문

  • background-attachment: fixed;
    CSS1
  • object.style.backgroundAttachment="fixed";
    CSS1

    자바스크립트 형식

버전 명세

Modules
Module NameStatusSummary
CSS Backgrounds and Borders Module Level 3

Last review date: 2022-7-9

지원 웹브라우저