Tailwind CSS fullscreen header image

— 4 minute read

Fullscreen header images are a trendy topic in web development. I quite like the effect of having a full-screen section that shows a big image.

In this article, we'll check out how to create the following two effects in Tailwind CSS.

  1. Full-screen image tag
  2. Full-screen background image

And the result will look like this CodePen below. (Example 1 = image tag (leaves), and the bottom one is the background image (dunes))

See the Pen by Chris Bongers (@rebelchris) on CodePen.

1. Full-screen header image in Tailwind

Let's start with the image. Sometimes you want to have an actual image preferred over the background image. This method can be pretty tricky, but let's see what we can do to make it work.

<section class="w-full h-screen">
  <img src="your_image.jpg" class="object-cover w-full h-full" alt="Image alt text" />
</section>

Alright, let's see what's going on here. We created a section that will define the size of our header. In our case, it fills the full width of the screen and the viewport height.

Then inside of that, we render the image, and what makes this work is the 100% width/height and object-cover class.

The object cover will make sure the image stretches so it keeps its optimal size.

2. Full-screen background image in Tailwind

Then for the easier but less accessible way is to use a background image. This effect will be nicer on smaller screens since the positioning is better.

For this to work in tailwind you have to add the image in your tailwind.config.js file like so:

module.exports = {
  mode: 'jit',
  purge: ['./public/**/*.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      backgroundImage: (theme) => ({
        dunes: "url('/dunes.jpg')",
      }),
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

You can use this image as bg-dunes.

So let's see how we can make a full-screen header in Tailwind CSS.

<section class="w-full h-screen bg-dunes bg-cover bg-center"></section>

And that's it! These are two ways to create full-screen header images in Tailwind.

I hope you enjoyed the article if you have any questions feel free to reach out to me.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter