Tailwind CSS Background Image Header Example

In this section we will see how to use background image in header, background header with image, using background header image inline css and tailwind css 3 example with Tailwind CSS.


Example 1

Add background image in header with inline css.

<div class="container mx-auto">
    <div class="w-full p-2 p-20 bg-center bg-cover h-96"
        style="background-image: url(https://cdn.pixabay.com/photo/2021/04/22/17/55/flowers-6199691__340.png);">
        <h1 class="text-3xl font-bold text-center text-purple-600">Background header image</h1>
        <p class="text-xl text-center text-white">This isLorem ipsum dolor sit amet consectetur adipisicing
            elit. Quidem debitis ipsam quia ducimus blanditiis, expedita corrupti pariatur quaerat maiores
            harum commodi a nemo perferendis soluta eveniet quod voluptatem nihil velit!</p>
    </div>
</div>


Example 2

Add background image in header in tailwind css 3.

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>how to add background image in header in tailwind css 3</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>

  <body>
    <div class="container mx-auto">
      <div
        class='bg-[url("https://cdn.pixabay.com/photo/2021/04/22/17/55/flowers-6199691__340.png")] h-96 w-full bg-cover bg-center p-20'>
        <h1 class="mb-2 text-3xl font-bold text-center text-purple-600">Background header image</h1>
        <p class="text-xl text-center text-white">This isLorem ipsum dolor sit amet consectetur adipisicing
          elit. Quidem debitis ipsam quia ducimus blanditiis, expedita corrupti pariatur quaerat maiores
          harum commodi a nemo perferendis soluta eveniet quod voluptatem nihil velit!</p>
      </div>
    </div>

  </body>

</html>
background image in header in tailwind css 3

background image in header in tailwind css 3


Rounded style background image in header in tailwind css 3

<div class="container mx-auto">
    <div
        class='bg-[url("https://cdn.pixabay.com/photo/2021/04/22/17/55/flowers-6199691__340.png")] h-96 w-full rounded-br-full bg-cover bg-center p-20'>
        <h1 class="mb-2 text-3xl font-bold text-center text-purple-600">Background header image</h1>
        <p class="text-xl text-center text-white">This isLorem ipsum dolor sit amet consectetur adipisicing
            elit. Quidem debitis ipsam quia ducimus blanditiis, expedita corrupti pariatur quaerat maiores
            harum commodi a nemo perferendis soluta eveniet quod voluptatem nihil velit!</p>
    </div>
</div>