Home
CSS
박스 모델

배경 이미지 고정하고 스크롤하는 방법 - background-attachment

background-attachment 속성으로 배경 이미지 고정, 스크롤 여부를 지정합니다.
1 min read

background-attachment

background-attachment 속성으로 배경 이미지 고정, 스크롤 여부를 지정합니다.

 

기본형

background-attachment : scroll | fixed | local
  • scroll : 내용을 스크롤하면 배경 이미지는 스크롤되지 않습니다.
  • fixed : 움직이지 않습니다.
  • local : 내용을 스크롤하면 배경 이미지도 스크롤됩니다.

 

예제

  • 다음은 이미지를 배경으로 한 예제입니다.

속성 값을 fixed로 하면 웹 브라우저의 왼쪽 위를 기준으로 배경 이미지가 고정됩니다.

 

기타 CSS 참조

박스 모델로 돌아가기

You may like these posts

  • 클래스 상태에 따라 스타일 지정 - 가상 클래스
    사용자가 웹 요소를 클릭하거나 마우스 커서를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들거나 웹 요소의 상태에 따라 스타일을 지정할 때 가상 클래스 선택자를 사용합니다. 목차 사용자 동작에 반응하는 가상 클래스 다음 가상 클래스 선택자들은 가상 클래스 선택자 중 자주 사…
  • ul, ol 가운데 정렬하는 방법
    목록의 내용만 가운데 정렬하기 목록 안의 내용만 가운데 정렬할 때는 text-align 속성을 사용합니다. <ul> <li>Lorem Ipsum</li> <li>Dolor Amet</li> …
  • 변수(variable) 사용하는 방법 - :root
    CSS 변수 CSS에 변수를 만들고 사용할 수 있습니다. 변수를 이용하면 여러 값을 한 번에 변경할 수 있습니다.   변수 선언 :root { --variable-name : value; } 변수를 정의하면, 변수를 정의한 요소와 그 하위 요소에서 그 변수를 사용할…
  • 목록 앞의 점 모양 바꾸기 - list-style-type
    순서 없는 목록의 경우, 목록 앞에 다양한 불릿(bullet)을 넣을 수 있고 순서 목록에서는 번호 스타일을 지정할 수 있습니다. 이때 list-style-type 속성을 이용합니다. list-style-type list-style-type으로 목록 앞의 점 모양 또는 형식을 바꿀 수 있습니다. &…
  • 태그 속성의 포함 관계 - 상속(inheritance)
    웹 문서에서 사용하는 여러 태그들은 서로 포함 관계가 있습니다. 포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라고 합니다. 스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식요소로 전달되는데 이것을 '스타일 상속'이라고 합니다. 상속(inh…
  • 가상 요소와 가상 클래스 순서
    가상 선택자를 링크와 관련해 사용할 때는 선택자 순서에 주의해야 합니다. 순서가 바뀌면 스타일을 정의하더라고 제대로 적용되지 않습니다. 가상 요소와 가상 클래스 순서 가상 요소를 이용하면 특정 요소 앞에 텍스트이나 이미지를 넣을 수 있습니다. HTML을 변경하지 않고 요소를 추가할…

Post a Comment