[HTML/CSS] 배경 이미지 넣는 방법(background-image)

배경 이미지 지정(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;
}