Level 51
1 like
Feb 6, 2023
5
Level 63
Background image and sticky header with TailwindCSS
Hello,
I'm in trouble for 2 hours to find a solution to do that.
<body class="w-full h-screen">
<img class="w-full h-full object-cover" src="./assets/img/fond.webp">
<div class="absolute t-0 l-0 top-0 left-0 w-full">
<header class="p-8 bg-gradient-to-b from-gray-800 to-gray-600">
</header>
<main>
</main>
<footer>
</footer>
</div>
</body>
I could set a background image directly from the CSS file, but I need to be able to replace the image dynamically from an admin form.
Here are the constraints :
-
the image has to cover all the screen (and not all the webpage)
-
the header has to be sticked at the top of the screen
-
the main and footer will scroll under the header
I have tried several things without finding any solution.
Can you help me please ?
Thanks a lot ;).
Vincent
Level 51
This is how I think I would do it. ( wanted to use the body tag) for the image but play didn't seem to like that. So I made it a div.
https://play.tailwindcss.com/zz5fkN1IaQ
For the image...
Just dynamically use your image in the tailwind class... (arbitrary value)
<div class="min-h-screen bg-fit bg-fixed bg-center bg-[url('{{ $pathToImage }}')]"> ...
OR You could also use a style tag to add the image...
<div class="min-h-screen bg-fit bg-fixed bg-center"
style="background-image:url('{{ $pathToImage }}')"> ...
1 like
Level 63
@webrobert Oh it works fine now, thank you very much ;).
I always forget that it's possible to add dynamical data into tailwind classes like bg-[url('./assets/img/fond.webp')].
1 like
Level 51
oh yeah... "arbitrary values"
https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values
1 like
Level 63
@webrobert That's a very powerful functionality.
Please or to participate in this conversation.