[css] background syntax

문제가 된 코드

background:url("../assets/images/icon/add_item.png") no-repeat 50% / 1.5rem;

background 프로퍼티에 관해 찾아본 내용

1. background 의 대략적인 syntax

// one line syntax
background: <bg-img> <bg-color> <bg-img-repeat> <bg-image-postion> / <bg-img-size>;

url("image path")
bg-color / e.g transparent or any color
bg-img-repeat / e.g repeat or no=repeat
bg-image-postion vertical and horizontal / e.g center center
bg-img-size  / e.g cover, contain, 100%, 800px, or 200px 100px (width and height) etc

2. background-size
   size 까지 한 줄에 표현 하려면 '/' 를 이용해 앞쪽 프로퍼티와 구분해야함

background:url("../assets/images/icon/add_item.png") no-repeat 50% / 1.5rem;

그러나 이 방식은 safari에서 지원하지 않음 → size 는 나눠서 기입하자~

background:url("../assets/images/icon/add_item.png") no-repeat 50%;
background-size: 1.5rem;