Tailwind CSS fullscreen header image

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 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 permalink

Let’s start with the image. Sometimes you want to have an actual image preferred over the background image. This method can be 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 entire 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 ensure the image stretches, keeping its optimal size.

2. Full-screen background image in Tailwind permalink

Then the more straightforward 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-center bg-cover bg-dunes"></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 contact me.

Thank you for reading, and let’s connect! permalink

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