Title: Background image opacity - Tailwind css
Tags: tailwind-css
Question: I have a background image and I am trying to give it a background opacity but I cannot to get it to work. I am using tailwind css.
<div className=&quot;text-mainText font-Montserrat bg-main-star-background sm:bg-10 sm:bg-right-22 bg-right-10 bg-no-repeat bg-2 sm:bg-opactity-0&quot;&gt;
Any ideas?

Here is the accepted answer: As far as I know, bg-opacity-x in Tailwind only works with background colors and not with background images.
For example, that will totally work :
<div class=&quot;h-full w-full min-h-screen bg-sky-600 bg-opacity-25&quot;&gt;</div&gt;
But this wouldn't :
<div style=&quot;background-image:url('https://images.unsplash.com/photo-1542995470-870e12e7e14f?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1470&amp;q=80')&quot;
class=&quot;h-full w-full min-h-screen bg-opacity-25&quot;&gt;</div&gt;
What you could do is adding a linear gradient above your background-image matching your bg colors :
<div style=&quot;background-image:linear-gradient(rgba(9, 148, 143, 0.9), rgba(9, 148, 143, 0.9)), url('https://images.unsplash.com/photo-1542995470-870e12e7e14f?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1470&amp;q=80')&quot; class=&quot;h-full w-full min-h-screen&quot;&gt;</div&gt;
Comment for this answer: Glad it did! ;) Happy coding!
Comment for this answer: Perfect! Thanks so much. The linear-gradient worked for me!


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2022:00:08/17/22', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<tailwind-css>', 'Title': 'Background image opacity - Tailwind css', 'ViewCount': 26, 'id': 73383278, 'user_AboutMe': None, 'user_AccountId': 25375159.0, 'user_DisplayName': 'Jennifer De Goede', 'user_Reputation': 177.0, 'user_Views': 43.0, 'user_id': 19188403.0}}