1.background-size
자신이 설정한 요소의 크기에 다운 받아 온 배경이미지를 넣었을 때 이미지의 크기가 맞지 않아 깨지는 현상이 있다 이 때 background-size를 사용하여 배경이미지의 크기를 적합하게 설정할 수 있는 속성이다.
cover
배경을 요소를 다 채울 수 있게 최대 크기에서 이미지를 확대 및 축소시킨다.
contain
배경을 사용하는 요소를 벗어나지 않는 최대 크기로 이미지를 확대 또는 축소
예시
👉cover
-html-
<body>
<div class = "header-icon-flower">
<a class="a-flower" href="https://flower.com" title="깃허브링크"
target="blank">
<div class="flower-cover">flower</div>
</a>
</div>
</form>
</body>
-css-
.header-icon-flower {
border-radius: 5px;
margin: 400px;
height: 400px;
position: relative;
overflow: hidden;
border: 1px solid black;
}
.a-flower {
position: relative;
display:inline-block;
width: 100%;
height: 100%;
}
.header-icon-flower:first-child .a-flower{
background: url("../practice/flower.png") no-repeat center/120%;
background-size: cover;
}👉contain
.header-icon-flower {
border-radius: 5px;
margin: 400px;
height: 400px;
position: relative;
overflow: hidden;
border: 1px solid black;
}
.a-flower {
position: relative;
display:inline-block;
width: 100%;
height: 100%;
}
.header-icon-flower:first-child .a-flower{
background: url("../practice/flower.png") no-repeat center/120%;
background-size: contain;
}