CSS : background image 반복 안되게 하는 법

백그라운드 이미지를 호출하여 사용하다보면 해당 사이즈 보다 작아 

연속적으로 아래와 같이 반복되는 경우가 있다.

 

이럴때에는 간단하게 

background-repeat 을 no-repeat 로 설정하면 된다.

아래와 같다.

&-image {
  width: 50px;
  height: 50px;
  background-image: url('~@/assets/images/home_black.svg');
  background-repeat: no-repeat;
}

 

그리고 이미지가 너무 작아 해당 크기로 꽉채우고 싶다면 아래와 같이 

background-size 옵션을 cover 로 추가하면 된다.

&-image {
  width: 50px;
  height: 50px;
  background-image: url('~@/assets/images/home_black.svg');
  background-size: cover;
  background-repeat: no-repeat;
}