9장 예제 - 배경 이미지 크기 조절하기

<!DOCTYPE html>

<head>

<style>

#container {

width:1100px;

margin:50px auto;

}

.box {

float:left;

border:1px solid #222;

width:300px;

height:300px;

margin:20px;

background:url("bg2.png") no-repeat left top; /*배경 이미지를 반복하지 않고 왼쪽 상단에 위치 */

}

#bg1 {background-size:auto;} /*원래 배경 이미지 크기로 표시 */

#bg2 {background-size:200px;} /*너비는 200px 높이는 자동 계산 */

#bg3 {background-size:50%;} /*너비는 요소 기준으로 50%,높이는 자동 계산 */

#bg4 {background-size:100% 100%;}/*요소의 너비와 높이를 100% 맞춤 */

#bg5 {background-size:contain;} /*요소의 배경 이미지가 다 보이게 표시 */

#bg6 {background-size:cover;} /*요소를 완전히 덮도록 배경 이미지 표시 */

</style>

</head>

<body>

</div>

</section>

</html>

JuSoft