Bootstrap) Background image (contain vs cover)

참고 :    http://tcpschool.com/css/css3_module_backgrounds

http://tcpschool.com/examples/tryit/tryhtml.php?filename=css3_module_backgrounds_02

https://developer.mozilla.org/ko/docs/Web/CSS/Scaling_background_images

샘플코드)

#fabio {

background:url("fabio.jpg");

background-repeat: no-repeat;

background-size: cover;

background-position: center center;

width: 100%;

height: 1000px;

}

<div id="fabio"></div>

background-size: cover vs contain;

cover>

속성값을 cover로 설정하면 이미지의 비율은 유지하면서, 요소의 모든 영역을 가리도록 크기를 조절한다. 따라서 배경 이미지의 크기가 해당 요소의 크기보다 항상 크거나 같게 되며, 배경 이미지의 일부분이 잘릴 수도 있다.

-> 소속된 엘리먼트를 꽉 채우라는 뜻

contain>

속성값을 contain으로 설정하면 이미지의 비율은 유지하면서, 크기를 가능한 한 크게 조절한다. 단, 배경 이미지의 크기가 해당 요소의 내용(content) 영역을 넘지는 않는다. 따라서 배경 이미지의 크기가 해당 요소의 크기보다 항상 작거나 같게 되며, 배경 이미지가 요소의 일부분은 가리지 못할 수도 있다.

-> 소속된 엘리먼트에 포함되어라는 뜻