Background image color overlay best practices?

[buismaarten]

What's the best practice to show a background image with color overlay using Tailwind CSS?

[estevanmaito]

The docs don't talk about background-image specifically, but every other background utility is usually exemplified with background-images using inline style, like .bg-fixed:

<div class="bg-fixed ..." style="background-image: url(...)"></div>

Edit: forgot that I had an example here using an img as background: https://codepen.io/estevanmaito/pen/yLYRrZw

[buismaarten]

Found a solution:

const plugin = require('tailwindcss/plugin');

module.exports = {
  ...
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        '.bg-overlay': {
          'background': 'linear-gradient(var(--overlay-angle, 0deg), var(--overlay-colors)), var(--overlay-image)',
          'background-position': 'center',
          'background-size': 'cover',
        },
      });
    }),
  ],
};

Usage:

<div class="bg-overlay" style="--overlay-image: url('...'); --overlay-colors: rgba(120, 186, 232, .7), rgba(120, 186, 100, .7);">
  ...
</div>

Hopefully there will be some better solution soon.

[itolimaesther]

I tried this but the image is not showing just the overlay color.

[city41]

The image should show. I had a brief moment when the image wasn't showing due to a typo.

[jenstornell]

Every tutorial and video I've seen uses inline style for background-image. I also tend to use inline styles for other custom stuff.

Example

<div class="grid" style="grid-template-columns: 1fr 300px 2rem;">
  Children
</div>

When to use inline styles (in my opinion)

• When you need very unique css that can't be created with Tailwind classes...
• ...and when the unique css is only used one time.

Common inline style css

• Background images
• Gradients
• Grid template columns or rows

Sure you can build a plugin or add it to tailwind.css file after @tailwind base; but when building a site and experimenting much, it often is much faster to just write it inline.

Other solutions

When you start to duplicate things, you should probably not add it as inline style anymore.

1. I would add it to tailwind.css as a new class as the first choice.
2. When needing something more complex and flexible, I would go for a plugin.

[quick007]

Background images
Gradients
Grid template columns or rows

aren't all these features built into the base tailwind?

[LoopsGod]

Hi!

This is how I ended up solving this;

<template>
  <div
    class="flex h-96 bg-cover bg-no-repeat bg-center select-none"
    :style="{ backgroundImage: `url(${src})` }"
  >
    <div class="flex h-full w-full hover:bg-core-secondary hover:bg-opacity-25">
      <div class="m-auto invisible sm:visible">
        <h3 class="text-2xl text-center text-white">
          {{ title }}
        </h3>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    src: String,
    title: String,
  },
}
</script>

This will create a parent container, with the background image. Inside, there's a child div that fills up the entire parent, on this child div, you put a hover: action, and perform your styling. This will cause the bg-opacity to only apply to the background of the child div; creating a nice overlay with a visible backgroundImage from the parent.

Good luck

[etozhealkhipce]

Hello!

I think it can be solve like this:

<div class="w-1/2 relative">
	<div class="bg-black rounded-xl opacity-30 w-full h-full absolute" />
	<img src="test.png" class="object-cover w-full rounded-xl" alt="" />
</div>

[anburocky3]

How to do place text inside it?

[etozhealkhipce]

How to do place text inside it?

Maybe add tag with position absolute?