Tailwind 모바일 CSS 배경 이미지 / 늘리거나 깨지지 않고 깔끔하게 배경 채우기

<!-- background -->
  <div class="absolute z-0 w-full h-full pointer-events-none">
    <swiper-container class="section1" style="width: 100%; height: 100%">
      <swiper-slide>
        <img
          class="object-cover w-full h-full pointer-events-none"
          src="assets/background/background_1.png"
        />
      </swiper-slide>
      <swiper-slide
        ><img
          class="object-cover w-full h-full pointer-events-none"
          src="assets/background/background_2.png"
      /></swiper-slide>
      <swiper-slide
        ><img
          class="object-cover w-full h-full pointer-events-none"
          src="assets/background/background_3.png"
      /></swiper-slide>
    </swiper-container>
  </div>

1. 배경 이미지를 슬라이드로 구현한 예시

2. object-cover w-full h-full : 을 사용해야 이미지가 늘어나거나 깨지지 않고 깔끔하게 배경으로 채워집니다.

3. pointer-events-none: 클릭 및 드래그를 막습니다.