Tailwind CSS fullscreen header image

Looking to get into development? As a full-stack developer I guide you on this journey and give you bite sized tips every single day 👊

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

Tailwind CSS fullscreen header image

Comments

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Vendure - Overwriting email templates

Customizing vendure

1. Full-screen header image in Tailwind

2. Full-screen background image in Tailwind

Thank you for reading, and let's connect!

Command Palette

Comments

More from this blog

1. Full-screen header image in Tailwind

2. Full-screen background image in Tailwind

Thank you for reading, and let's connect!