박스모델 4편 background
background
- background-color
- 배경 색 정의
- 색상코드로 지정 가능 - background-image
- 배경 이미지 정의
- 이미지를 채우고 남은 공간은 이미지로 반복 - background-position
- 배경 이미지의 초기 위치 정의
- 'left', 'right', 'top', 'bottom', 'center' 5개 (조합 가능)
- 기본값 : left top - background-size
- 배경 이미지의 크기 정의
- 가로 세로 (픽셀) or 'cover', 'contain'
- cover : 이미지로 모두 채움 (종횡비 유지 X)
- contain : 이미지 채움 (종횡비 유지 O) - background-repeat
- 배경 이미지의 반복 방법 정의
- 기본값 : repeat
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>box-model background</title>
<style>
div{
box-sizing: border-box;
width: 700px; height: 500px;
border: 1px solid blue;
background-image: url(./img.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
</style>
</head>
<body>
<div>Hello</div>
</body>
</html>
ISTJ의 재미없는 velog