본문 바로가기
HTML/CSS문법

CSS background-attacthment

by flycoding 2023. 7. 9.
반응형

CSS background-attacthment 속성

Background-Attachment 속성은 배경 이미지를 스크롤할지 또는 고정할지(페이지의 나머지 부분에서는 스크롤하지 않음)를 지정한다:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 200px;
  background-attachment: fixed;
}
</style>
</head>
<body>

<h1>배경 첨부 속성</h1>

<p>Background-Attachment 속성은 배경 이미지를 스크롤할지 고정할지 여부를 지정합니다(페이지의 나머지 부분에서는 스크롤하지 않음).</p>

<p><strong>Tip:</strong> 스크롤 막대가 보이지 않으면 브라우저 창의 크기를 조정해 보십시오.</p>

<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>


</body>
</html>

background-attacthment : fiexed로 설정하면 화면은 스크롤되지만 배경이미지는 고정된다.

CSS background-attachment&nbsp; fixed 속성 활용예시

 

background-attachment : scroll 로 설정하면 화면 스크롤로 배경이미지도 함께 스크롤된다.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 200px;
  background-attachment: scroll;
}
</style>
</head>
<body>

<h1>배경 첨부 속성</h1>

<p>Background-Attachment 속성은 배경 이미지를 스크롤할지 고정할지 여부를 지정합니다(페이지의 나머지 부분에서는 스크롤하지 않음).</p>

<p><strong>Tip:</strong> 스크롤 막대가 보이지 않으면 브라우저 창의 크기를 조정해 보십시오.</p>

<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도.</p>


</body>
</html>


위의 코드를 실행하면 배경이미지는 화면과 함께 스크롤되어 위로 올라간 것을 확인할 수 있다.

CSS background-attachment scroll 화면예시

 

이상으로 간략히 background-attachment 속성에 fixed와 scroll 설정에 따른 실습을 해보았다.

간단하지만, 몸으로 손으로 머리로 익히며 실습하기를 바랍니다.

모두 화이팅입니다.!!!

 

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

반응형
저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS 테두리(CSS borders)  (0) 2023.07.11
CSS background - shorthand 속성  (0) 2023.07.10
CSS 배경이미지 반복(CSS background image repeat)  (0) 2023.07.08
CSS 배경이미지(CSS Background Image)  (0) 2023.07.07
CSS 배경(CSS Background)  (0) 2023.07.06

관련글

댓글

티스토리툴바