Front-end/CSS

css background-image 여러개 적용하기

mooyou 2022. 8. 3. 21:58
728x90
300x250
.bg{
    width: 62px;
    height: 34px;
    background-size: 26px 34px, 26px 34px;
    background-position:0px 0px, 36px 0px;
    background-repeat: no-repeat;
    background-image: url(../images/icon1.png), url(../images/icon2.png);
}
  • background-image 에 ','로 구분하여 background 이미지 개수 만큼 작성한다.
  • 여러 개의 이미지를 나란히 적용하기 위해 width 값을 이미지 전제 넓이로 작성한다.
  • background-position 을 이용해  각각의 위치를 잡아준다.
728x90
반응형