SoloLearn CSS 번역

CSS background-attachment Property

background-attachment 속성

• The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.
  • background-attachment 속성은 배경 이미지가 고정되어 있는지 또는 나머지 페이지와 함께 스크롤 되는지를 설정한다.
• Even if an element has a scrolling mechanism, a “fixed” background doesn’t move with the element.
  • element에 scrolling mechanism이 있어도, “고정된” 배경은 element와 함께 움직이지 않는다.

• CSS:

body {
   background-image: url("css_logo.png");
   background-repeat: no-repeat;
   background-attachment: fixed;
}

코드 실행 확인

• Result:

The background-attachment Values

background-attachment 값

• You can also set the background-attachment to inherit or scroll.
  • inherit 또는 scroll 하도록 background-attachment를 설정할 수도 있다.
• When you set the background-attachment to inherit, it will inherit the value from its parent element.
  • inherit(상속)할 background-attachment를 설정하면, parent(부모) element의 값을 상속받는다.

• When you set the background-attachment to scroll, the background image will scroll with the rest of the content.
  • scroll할 background-attachment를 설정하면, 배경 이미지가 나머지 content와 함께 scroll 된다.

• CSS:

body {
   background-image: url("css_logo.png");
   background-repeat: no-repeat;
   background-attachment: scroll;
}

코드 실행 확인

• Result:

QUIZ

• When setting a background image, which property is obligatory?
  • 배경 이미지를 설정할 때 어떤 속성이 필수적인가?

background-image

• The background-attachment property accepts the following values: inherit, fixed and:
  • background-attachment 속성은 inherit, fixed, …값을 허용한다.

scroll