Placing my logo on top of an image?

[dallaskruse]

I have a header with an image.

I wanna overlay my logo on top of it. I can’t, for the life of me, figure it out.

Header:

<!-- This example requires Tailwind CSS v2.0+ -->
<div class="relative bg-indigo-100">
    <div class="absolute inset-0">
        <img class="w-full h-full object-cover" src="https://i0.wp.com/fox59.com/wp-content/uploads/sites/21/2022/02/GettyImages-1312858221.jpg?w=2000&ssl=1" alt="">
        <div class="absolute inset-0 bg-[#6F9283] mix-blend-multiply" aria-hidden="true"></div>
    </div>
    <div class="relative max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8">
        <h2 class="text-base font-semibold text-[#CDC6A5] tracking-wide uppercase">Zion Entertainment</h2>
        <h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl">Event Request</h1>
        <p class="mt-6 text-xl text-indigo-100 max-w-3xl">You want a band. We got it. Tell us about your event. We'll get a quote right out to you.</p>
    </div>
</div>

Logo should go somewhere here:

Can someone point me in the right direction? I’ve tried and tried but can’t get it right

[Andrew]

Can take a look at positioning here. Your outer div is relative, meaning an absolute child will be positioned relative to the parent. This is the desired behavior, since we want to position a logo relative to the parent div.

Here’s an example of a div (gray circle) I positioned inside the parent div:

<div class="absolute right-40 top-32 bg-gray-300 w-52 h-52 rounded-full"></div>