배경 이미지 지정(background-image)
body {background-image : url('이미지 URL');}
#area {background-image : url('이미지 URL');}
.area {background-image : url('이미지 URL');}
배경 이미지 반복(background-repeat)
- background-repeat : repeat : 화면에 가득 찰 때까지 배경 이미지를 반복합니다.
- background-repeat : repeat-x : 화면에 가득 찰 때까지 배경 이미지를 가로로 반복합니다.
- background-repeat : repeat-y : 화면에 가득 찰 때까지 배경 이미지를 세로로 반복합니다.
- background-repeat : no-repeat : 배경 이미지를 반복하지 않고 한 번만 표시합니다.
HTML
<div class="bg1">repeat</div>
<div class="bg2">repeat-x</div>
<div class="bg3">repeat-y</div>
<div class="bg4">no-repeat</div>
CSS
div{
width:300px;
height:300px;
margin:30px;
border:1px solid red;
background-image:url('https://i.ibb.co/3493r17/cat.jpg');
}
.bg1{
background-repeat:repeat;
}
.bg2{
background-repeat:repeat-x;
}
.bg3{
background-repeat:repeat-y;
}
.bg4{
background-repeat:no-repeat;
}
배경 이미지 크기(background-size)
- background-size : auto : 원래 이미지 크기만큼 배경에 표시됩니다.
- background-size : contain : 요소 안에 배경 이미지가 다 들어가도록 이미지를 자동으로 확대 / 축소합니다.
- background-size : cover : 배경 이미지로 요소를 모두 덮도록 이미지를 확대 / 축소합니다.
- background-size : [크기값] : 배경 이미지의 크기를 지정합니다. (너비만 지정할 경우 높이를 자동 계산)
- background-size : [백분율] : 배경 이미지가 들어갈 요소 기준으로 백분율 값을 지정합니다.
HTML
<div class="bg1">auto</div>
<div class="bg2">contain</div>
<div class="bg3">cover</div>
<div class="bg4">200px 300px</div>
<div class="bg5">60% 40%</div>
CSS
div{
width:300px;
height:300px;
margin:10px;
border:1px solid red;
background-image:url('https://i.ibb.co/3493r17/cat.jpg');
}
.bg1{
background-size:auto;
}
.bg2{
background-size:contain;
}
.bg3{
background-size:cover;
}
.bg4{
background-size:200px 300px;
}
.bg5{
background-size:60% 40%;
}
배경 이미지 위치(background-position)
- background-position : [수평위치] [수직 위치]
- 수평위치 : left, center, right, 백분율, 길이값
- 수직위치 : top, center, bottom, 백분율, 길이값
HTML
<div class="bg1">키워드 사용1</div>
<div class="bg2">키워드 사용2</div>
<div class="bg3">백분율(%) 표시</div>
<div class="bg4">길이(px) 표시</div>
CSS
div{
width:300px;
height:300px;
margin:10px;
border:1px solid red;
background-repeat:no-repeat;
background-image:url('https://i.ibb.co/3493r17/cat.jpg');
}
.bg1{
background-position:center;
}
.bg2{
background-position:right,center;
}
.bg3{
background-position:10% 30%;
}
.bg4{
background-position:30px 30px;
}