Tailwind background image cover 배경 이미지 커버 활용 예시 / VW / VH

<main
  class="flex w-full h-screen bg-cover bg-[url('/img/hero-pattern.svg')]
>
</main>

1. 이미지 경로 기본 슬래시 / 사용

2. screen 속성은 vh, vw 수치를 결정한다. 현재 스크린의 max-w : vw="100"  

 

 

 

<section class="flex flex-col w-full h-screen relative">
  <div
    class="w-full h-full absolute bg-cover bg-[url('/assets/background/background_image_beach.svg')] z-0"
  ></div> 배경이미지

  <div class="flex flex-col gap-8 px-40 h-full flex-1 justify-center z-10">
  	콘텐츠
  <div>
  
</section>

3. z-index 를 활용하여 배경이미지와 콘텐츠를 따로 관리하기도 합니다. (div)

 

 

 

 

<img
    src="assets\background\background_3.png"
    class="w-full h-full absolute z-0 object-cover pointer-events-none"
  />

4. img 태그 하나로도 대체할 수 있습니다.

5. object-cover  : 해당 속성이 없으면 이미지가 늘어나거나 깨지지 않고 깔끔하게 채워집니다.

6. pointer-events-none : 마우스 드래그를 막습니다. 이미지 태그에 웬만하면 넣는 것을 추천드려요

 

https://tailwindcss.com/docs/object-fit

Object Fit - Tailwind CSS

참고