article thumbnail image
Published 2022. 11. 24. 13:38

 

배경 이미지 넣기 (background-image)

 

배경 이미지 반복 횟수 지정하기 (background-repeat)

 

background-repeat 속성 값

 

배경 이미지 반복 (repeat)

 

배경 이미지 한 번만 넣기 (no-repeat)

 

 

가로 방향으로 이미지 반복 (repeat-x)

 

이런식으로 화면을 쭉빼도 

 

계속 이어져서 나온다.

 

 

세로 방향으로 이미지 반복 (repeat-y)

 

배경 이미지 잘리지 않도록 반복 (space) -  공백

 

배경 이미지 잘리지 않도록 반복 (round) - 빈 공간 없음

 

배경 이미지 위치 지정하기 (background-position)

 

배경 이미지 가운데 한 번만 넣기 (center)

 

배경 이미지 크기 설정하기 (background-size)

 

이미지가 잘리지 않는 한도 내에서 가장 크게 표시하기 (contain)

 

이미지가 찌그러지지 않는 한도 내에서 배경에 꽉 차도록 표시하기 (cover)

 

이미지가 찌그러지더라도 배경에 꽉 차도록 표시하기 (100% 100%)

 

 

 

 


 

To be continue..

복사했습니다!