Setting Background Image Opacity

[GideonBrimleaf]

Hello!

The Tailwind docs clearly show how to set the opacity of a background colour but this does not seem to work when applying it to a background image. For example:

<div class="bg-home-page-image bg-opacity-25">

Doesn't seem to change the opacity of the example image here for me and it seems that you need workarounds to mimic a transparent background image in CSS in general

Is there a way to achieve this in Tailwind? Or would I need to use custom css like this solution

[simonswiss]

Hey!

Currently it's not possible to add transparency to a background image since the bg-opacity-{n} updates the --tw-bg-opacity CSS variable, which affects background color classes - not background images.

I'd achieve it by having an "overlay" div with transparent background over the top of the image. Not exactly the same effect, but an overlayed image works quite well in many situations 👍

Here's an example in Tailwind Play:

https://play.tailwindcss.com/RnQTIA1FS1

Hope it helps!

[GideonBrimleaf]

Thanks @simonswiss - really helpful :)

[realdaly]

Why is it currently not possible? because there's no background image opacity in css?

[wongjn]

Exactly right.

[gbrian]

This worked fine for me: https://stackoverflow.com/questions/64663368/background-image-with-opacity-in-tailwindcss

<header
  class="relative bg-fixed bg-center bg-cover bg-no-repeat"
  style="background-image:linear-gradient(rgba(135, 80, 156, 0.9), rgba(135, 80, 156, 0.9)), url(img/hero-bg.jpg)">
  
</header>

With some tweaks:

  <div class="relative bg-fixed bg-center bg-cover bg-no-repeat"
    :style="`background-image:linear-gradient(hsl(var(--b1) / 0.9), hsl(var(--b2) / 0.5)), url(${favlist.backgroundImage})`">

[simesy]

Thanks!

[gevuong]

For me, I wanted the background image to have an opacity of 0.4. I tried what others suggested by applying opacity to the linear gradient (from black to #162b4c), but I did not get the desired effect..

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'publications-header':
          'url(../assets/phone_header.png), linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(22, 43, 76, 0.4))',
      }
    }
  }
}

// rendered in jsx component
<div className="relative bg-publications-header bg-center">
  <h1 className="py-60 text-center text-5xl text-green-600">Publications</h1>
</div>

Instead, I needed to apply opacity directly on the background image like so:
I'm using the Next.js Image component here btw. As a result, I managed to get the desired effect.

<div className="relative bg-gradient-to-b from-black to-[#162b4c]">
  <Image
    src={PhoneHeader}
    className="absolute h-full w-full object-cover opacity-40"
    alt=""
  />
  <h1 className="py-60 text-center text-5xl text-green-600">Publications</h1>
</div>