배경 스타일 CSS - background-size / background-attachment

배경 스타일 CSS - background-size

• background-size 속성을 사용하면 배경 이미지를 여러 크기로 조절할 수 있습니다.
• 기본형 : background-size : auto / contain / cover / < 크기 값 > / < 백분율 >

속성 값	설명
auto	원래 배경 이미지만큼 표시됩니다.(기본값)
contain	요소 안에 배경 이미지가 다 들어오도록 이미지를 확대, 축소합니다.
cover	배경 이미지로 요소를 모두 덮도록 이미지를 확대/ 축소합니다.
< 크기 값 >	너비 값과 높이 값을 지정합니다. 너비 값만 지정할 경우, 원래 배경 이미지 크기를 기준으로 축소/확대 비율을 자동으로 계산해 높이 값을 지정합니다.
< 백분율 >	배경 이미지가 들어갈 요소의 크기를 기준으로 백분율 값을 지정하고 그 크기에 맞도록 배경 이미지를 확대하거나 축소합니다.

background-size : auto

background-size : contain

background-size : cover

background-size : <크기값>

background-size : <백분율>

<style>
    .exam1 {background-image: url(img/tree.jpg); background-size: auto; width: 300px; height: 200px; border: 1px solid #7a2020;  margin-bottom: 10px;}
    .exam2 {background-image: url(img/tree.jpg); background-size: contain; background-repeat: no-repeat; width: 300px; height: 200px; border: 1px solid #7a2020; margin-bottom: 10px;}
    .exam3 {background-image: url(img/tree.jpg); background-size: cover; width: 300px; height: 200px; border: 1px solid #7a2020;  margin-bottom: 10px;}
    .exam4 {background-image: url(img/tree.jpg); background-size: 200px 150px; background-repeat: no-repeat;  width: 300px; height: 200px; border: 1px solid #7a2020; margin-bottom: 10px;}
    .exam5 {background-image: url(img/tree.jpg); background-size: 100% 100%; width: 300px; height: 200px; border: 1px solid #7a2020; margin-bottom: 10px;}
</style>      

배경 스타일 CSS - background-attachment

• background-attachment 속성은 배경 이미지를 고정할 수 있습니다. 보통은 스크롤을 내렸을 때 배경 이미지도 함께 이동합니다.
• 기본형 : backgorund-attachment : scroll / fixed

속성 값	설명
scroll	화면 스크롤과 함께 배경 이미지도 스크롤됩니다.(기본값)
fixed	화면이 스크롤되더라도 배경 이미지는 고정됩니다.