CSS - [ 속성 (배경) ]

이번엔 css의 배경과 관련된 내용을 살펴보자!!

background-color : 요소의 배경 색상을 지정하는 속성으로 기본값은 투명한 transparent이다.
background-image : 요소의 배경 이미지 삽입 속성. url("경로") 와 같이 값을 넣어주면 된다.
background-repeat : 요소의 배경 이미지 반복 속성으로 기본값은 바둑판식으로 반복하는 repeat이다. repeat-x는 이미지를 수평 반복, repeat-y는 이미지를 수직 반복, no-repeat는 반복 없는 값이다.
background-position : 요소의 배경 이미지 위치 속성. top, bottom, left, right, center와 같이 방향으로 입력하거나 px, em, 등 단위로 지정하는 총 2가지의 방법이 있다.
background-size : 요소의 배경 이미지 크기 속성. 기본값은 이미지의 실제 크기인 auto이다. 단위로 입력하거나, 비율을 유지하며 요소의 더 넓은 너비에 맞추는 cover와 요소의 더 짧은 너비에 맞추는 contain이 있다.

backgounrd-attachment : 요소의 배경 이미지 스크롤 특성. 기본값은 이미지가 요소를 따라서 같이 스크롤 하는 scroll 이다. fixed는 이미지가 뷰포트에 고정되어 스크롤을 할 수 없다. 말로 쓰면 조금 이해하기 어려운 것 같다..

scroll의 경우는 우리가 자주 보다시피 이미지가 배경에 고정되어있고 아래로 스크롤하면 그림도 화면과 함께 따라올라가 없어진다.

fixed의 경우는 이미지가 뷰포트에 고정되어있으므로 이미지의 위치는 달라지지 않고, 이미지의 보이는 부분만 달라진다고 생각하면 될 것 같다!

티스토리툴바