Tailwind CSS背景图片边距与尺寸问题：无法全屏显示

问题根源 #

你给section硬设了固定高度h-[250px] md:h-[350px]，直接把背景图框死在狭小区域里；而且h-full无效是因为html、body默认没有设置全屏高度，子元素的h-full找不到参照高度。

修复步骤 #

1. 让根容器撑满视口
   修改body的类，让页面容器占满整个屏幕，同时让header和section垂直排列：

   <body class="min-h-screen flex flex-col">
   

2. 让section自动填充剩余空间
   删除section里的固定高度类h-[250px] md:h-[350px]，添加flex-1，这样section会自动占满header之外的所有屏幕空间；同时把背景图路径的反斜杠改成正斜杠（HTML路径规范用正斜杠）：

   <section class="bg-[url('./Images/BackgroundImg.jpg')] w-full flex-1 bg-cover bg-center bg-no-repeat mb-8">
   

3. 进阶：背景图完全覆盖全屏（header悬浮）
   如果想要背景图直接铺满整个视口，header悬浮在上方，就这么改：

   • 给header加relative z-10，确保它在背景图上层
   • section改成固定定位，占满整个屏幕：

     <header class="bg-white font-sans relative z-10">
       <!-- 原header内容不变 -->
     </header>
     <section class="bg-[url('./Images/BackgroundImg.jpg')] fixed inset-0 z-0 bg-cover bg-center bg-no-repeat">
     </section>
     

修改后的完整关键代码片段 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <title>Maruti-Multi-Trade-LLC</title>
    <script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></script>
</head>
<body class="min-h-screen flex flex-col">

  <header class="bg-white font-sans">
    <nav class="flex justify-between items-center w-[92%] mx-auto">
        <div>
            <img class="w-20 cursor-pointer" src="./Images/Logo.png" alt="Logo">
        </div>
        <div
            class="nav-links duration-500 md:static absolute bg-white md:min-h-fit min-h-[60vh] left-0 top-[-100%] md:w-auto  w-full flex items-center px-5">
            <ul class="flex md:flex-row flex-col md:justify-end md:gap-[4vw] gap-8 list-none text-base font-bold ">
                <li>
                    <a class="no-underline text-darkbluegray hover:text-bluegray hover:font-bold  " href="#">HOME</a>
                </li>
                <li>
                    <a class="no-underline text-darkbluegray hover:text-bluegray hover:font-bold " href="#">SERVICES</a>
                </li>
                <li>
                    <a class="no-underline text-darkbluegray hover:text-bluegray hover:font-bold " href="#">RESOURCES</a>
                </li>
                <li>
                  <a class="no-underline text-darkbluegray hover:text-bluegray hover:font-bold " href="#">ABOUT</a>
                </li>
                <li>
                    <a class="no-underline text-darkbluegray hover:text-bluegray hover:font-bold " href="#">CONTACT</a>
                </li>
            </ul>
        </div>
        <div class="flex items-center gap-6">
            <ion-icon onclick="onToggleMenu(this)" name="menu" class="text-3xl cursor-pointer md:hidden"></ion-icon>
        </div>
    </nav>
  </header>
  <section class="bg-[url('./Images/BackgroundImg.jpg')] w-full flex-1 bg-cover bg-center bg-no-repeat mb-8">
  </section>

<script>
    const navLinks = document.querySelector('.nav-links')
    function onToggleMenu(e){
        e.name = e.name === 'menu' ? 'close' : 'menu'
        navLinks.classList.toggle('top-[9%]')
    }
</script>

</body>
</html>

内容的提问来源于stack exchange，提问作者Pawan Thakur