본문 바로가기
프로그래밍 공부 정리/html,css

배경 스타일 설정

by 메기사랑 2021. 12. 11.

**배경색상과 배경 이미지
background-color 배경색상을 설정

background-image=url('파일경로') 배경이미지를 설정


background-repeat: 
repeat 기본값, 가로, 세로반복
repeat-x 가로반복
repeat-y 세로반복
no-repeat 반복안함

background-size: auto 원래 이미지 크기만큼 표시
 contain 요소의 크기에 이미지 다 들어오도록 이미지를 확대,축소
 cover 요소를 배경이미지로 다 덮도록 이미지를 확대하거나 축소
 크기값
 백분율

background-clip
border-box 테두리까지
padding-box 테두리를 뺀 안쪽여백까지
content-box 요소의 내용부분까지

background-position: 수평위치 수직위치


background-repeat:no-repeat인 경우에
배경이미지를 어디에 놓을 것인지 설정
수평위치: left center right  백분율 길이값
수직위치: top center bottom  백분율 길이값

background-origin
배경이미지를 배치하기 위한 기준을 설정
border-box 요소의 테두리가 기준
padding-box 테두리를 뺀 안쪽 여백부터 기준
content-box 요소의 내용이 있는 부분부터 기준

background-attachment
background-repeat: no-repeat이고
background-position이 설정이 되어 있을 때
늘 그자리에 고정시킬 것인지 아닐 것인지 설정
scroll
fixed