<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>배경</title>
</head>
<style>
div {
width: 1000px;
height: 1000px;
background-color: #ffd6de;
}
div > img {
width: 100%;
height: 100%;
}
#bg-div {
background-image: url("cat.jpg");
background-repeat: no-repeat; /* repeat-x : x축으로 반복복사 repeat-y : y축으로 반복복사 no-repeat : 반복복사 안됨*/
background-position: center; /* 배경에 맞춘 위치 */
/* contain : 부모에 채울 수 있는 만큼 크게 맞춘다(비율 유지함) (일반적으로 x,y 중 한쪽만 끝까지 붙는다)
cover : 부모가 꽉 찰때까지 비율을 유지한채로 크게 키움(일반적으로 x,y 중 한쪽이 잘림.벗어남)
*/
background-size: contain;
}
section {
width: 500px;
height: 500px;
padding: 50px;
background-color: green;
border-width: 15px;
border-style: dotted;
background-clip: padding-box; /* padding - 패딩구역까지, border - 볼덜구간까지 포함 */
}
article {
width: 50%;
height: 50%;
/*background-color: #ffd6de;*/
}
</style>
<body>
<section>
<article>컨텐츠!</article>
</section>
<div id="bg-div"></div> <!-- background는 태그 상관x -->
<div>
<img src="cat.jpg" alt="cat">
</div>
</body>
</html>
