background-position 'px'로 따로 지정하기

배경으로 이미지를 넣을 때 세밀하게 위치 조정이 필요한 경우

아래와 같은 방법으로 응용해서 쓴다.

.content {background-position: left 15px top 20px;}
.content {background-position: left 15px center;}
.content {background-position: right 20px top;}

재밌는건 calc로도 지정이 가능하다 ㅎㅎ

.content {background-position: left calc(100% - 20px) center;}

 

 

** background 속기법

 .content {
        background: url(../img/icon/angle_thin_right.svg) no-repeat right calc(100% - 45px) center / cover;
  }
  
  // 배경 컬러랑 같이 쓰일 때
   .content {
        background: url(../img/icon/angle_thin_right.svg) no-repeat right calc(100% - 45px) center / cover, #fff;
  }