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

  • 이미지의 특정 부분만 보이게 하는 방법 - clip
    clip clip 속성으로 요소의 특정 부분만 나오도록 할 수 있습니다. position 속성값이 absolute 또는 fixed일 때만 적용됩니다.   기본형 clip : auto | shape auto : 요소의 모든 부분이 나옵니다. shape : 특정 부분이 나오도록…
  • 이미지 비율 맞추는 방법 - max-width, max-height
    이미지 비율 맞추기 텍스트는 일반적으로 바뀐 폭에 맞추어 자동으로 줄바꿈이 되지만, 이미지는 줄바꿈이라는 게 없기 때문에 문제가 생깁니다. 어떤 문제가 발생하는지 살펴보고 해결책을 찾아보겠습니다.   이미지 크기를 정하지 않은 경우 이미지의 크기를 정하지 않으면 부모 요소보…
  • 내용을 투명하게 만드는 방법 - opacity
    opacity opacity로 투명도를 정할 수 있습니다.   기본형 opacity : number number : 0 부터 1.0 까지의 수를 넣습니다. 숫자가 작을수록 투명해집니다.   예제 <div cla…
  • 배경 이미지 투명하게 만드는 방법
    배경의 투명도 배경만 투명하게 하려면 RGBA 색상을 이용하여 정합니다. 간단한 예제는 다음과 같습니다. div { padding: 40px; background-image: url( "//bit.ly/3l02sot" ); } p { font-family: "Arial Black", sans-se…
  • CSS를 HTML에 적용시키는 방법
    웹 문서 안에는 여러 개의 스타일 규칙이 사용되는 경우가 많습니다. 이런 스타일 규칙들을 한눈에 확인하고 필요할 때마다 수정하기 쉽도록 한 군데 묶어 놓은 것을 '스타일 시트' 라고 합니다. 스타일 시트는 문서 안에서 사용할 스타일 규칙들을 정의한 '내부 스타일 시트'와 별도의 스타일 파일을 만들어 문…
  • 이미지 가운데 정렬하는 방법
    이미지 가운데 정렬하는 방법 이미지를 가운데 정렬하는 방법은 여러 가지가 있습니다. 그 중 자주 사용되는 두 가지를 소개합니다.   방법 1 이미지의 부모 요소에 text-align 속성을 추가하는 방법입니다. <div> …

Post a Comment