공대생의 에러일기

CSS background-size 속성 contain과 cover 차이 본문

Web

CSS background-size 속성 contain과 cover 차이

냥늉냥 2021. 7. 16. 02:33
반응형

css에서 뒷배경을 설정해줄 때는 background-size 로 설정을 해줍니다

이때 배경을 채우는 속성에는 여러가지가 있지만 containcover에 대해 설명하겠습니다

 

 

원본이 아래 사진과 같다면

 

 

# contain

이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정

(이미지가 원본 그대로 살아있으며 따로 설정하지 않으면 이미지가 반복됩니다.)

 

 

# cover

이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정

(이미지를 잘라서 빈 공간이 생기지 않도록 합니다.)

 

 

 

 

 

 

 

 

조금 더 자세히 알고싶다면 링크 참조

https://developer.mozilla.org/ko/docs/Web/CSS/background-size

 

background-size - CSS: Cascading Style Sheets | MDN

배경 이미지로 덮이지 않은 공간은 background-color 속성으로 채워지고, 배경 이미지에서 투명하거나 반투명한 부분을 통해서도 배경색이 보입니다.

developer.mozilla.org

 

Comments