darken background image (Opacity?) - tailwind-css

Question

So, I am using tailwind and I am trying to darken the background image that loads for this header. The purpose of this is I want to make sure the text is readable regardless of what someone picks for a background image.
<div :style="{ backgroundImage: `url(${profile.cover_photo_path})` }" class="bg-center bg-cover h-48 w-full grid grid-cols-9 text-white shadow-2xl rounded-xl p-2">
<div class="col-span-2 mx-auto my-auto">
<img :src="profile.profile_photo_path" class="rounded-full h-36 w-36 border-4 border-red-700" />
</div>
<div class="pl-4 md:pl-0 col-span-2 grid content-center">
<div class="text-lg font-logo uppercase">
{{profile.name}}
</div>
<div class="text-sm font-light">
{{profile.user_city}}, {{profile.user_region}}, {{profile.user_country}}
</div>
<div class="text-sm font-light">
{{calculateAge}} years old
</div>
</div>
<div class="col-span-3 grid content-end">
</div>
<div class="text-lg uppercase col-span-1 grid content-end justify-end">
<div class="mx-auto">
<button type="button" class="inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md text-white bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600">
<PlusIcon class="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
Follow
</button>
</div>
</div>
<div class="text-lg uppercase col-span-1 grid content-end justify-center">
<div class="mx-auto">
<button type="button" class="inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md text-white bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600">
<MailIcon class="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
Message
</button>
</div>
</div>
</div>
```
I am open to other ideas but in my head it would be an opacity that would fix this. If you have another idea that would be more effective for this header/cover please let me know.

Answer 1

The best way to do this is to take an absolute image and control it as you want.
Like this: Tailwind Play Link

Answer 2

I had masked a div of the same dimensions but of black color behind your header and made the opacity of the header to 0.7.
I had added div by this
<div class="h-48 w-full bg-black absolute"></div>
And added class absolute z-10 opacity-70 to put the header div in front of black div.
Also instead of using :style="{ backgroundImage: url(path-name) }" you can use bg-[url(path-name)] like I had used.
You can see the complete code here
<script src="https://cdn.tailwindcss.com"></script>
<div class="absolute z-10 grid h-48 w-full grid-cols-9 rounded-xl bg-[url(http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back05.jpg)] bg-cover bg-center p-2 text-white opacity-60 shadow-2xl">
<div class="col-span-2 mx-auto my-auto">
<img src="http://codeskulptor-demos.commondatastorage.googleapis.com/pang/IHXoEES.png" class="h-36 w-36 rounded-full border-4 border-pink-200" />
</div>
<div class="col-span-2 grid content-center pl-4 md:pl-0">
<div class="font-logo text-lg uppercase">{{profile.name}}</div>
<div class="text-sm font-light">{{profile.user_city}}, {{profile.user_region}}, {{profile.user_country}}</div>
<div class="text-sm font-light">{{calculateAge}} years old</div>
</div>
<div class="col-span-3 grid content-end"></div>
<div class="col-span-1 grid content-end justify-end text-lg uppercase">
<div class="mx-auto">
<button type="button" class="inline-flex items-center rounded-md border border-transparent bg-red-700 px-3 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-offset-2">
<PlusIcon class="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
Follow
</button>
</div>
</div>
<div class="col-span-1 grid content-end justify-center text-lg uppercase">
<div class="mx-auto">
<button type="button" class="inline-flex items-center rounded-md border border-transparent bg-red-700 px-3 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-offset-2">
<MailIcon class="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
Message
</button>
</div>
</div>
</div>
<div class="absolute h-48 w-full bg-black"></div>
Ignore the warning and see in full view