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="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">
Any ideas?
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="h-full w-full min-h-screen bg-sky-600 bg-opacity-25"></div>
But this wouldn't :
<div style="background-image:url('https://images.unsplash.com/photo-1542995470-870e12e7e14f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80')"
class="h-full w-full min-h-screen bg-opacity-25"></div>
What you could do is adding a linear gradient above your background-image matching your bg colors :
<div style="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&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80')" class="h-full w-full min-h-screen"></div>
Related
I am struggling to imagine the best way to accomplish a layout I am trying to achieve which includes a static sized oval that is cropped for smaller screens and which contains text inside it that will respond based on the breakpoint.
The design is like this:
So far, I'm here:
I'm trying to achieve this by creating the Oval outside my container div then putting on negative margin on the text to give it the appearance it is inside the oval. I feel like this isn't the right approach.
Currently set up (using Tailwind):
<section id="reading">
<div class="mt-12 border border-black rounded-[50%] overflow-hidden w-[686px] h-72"></div>
<div class="flex flex-col mx-auto md:container">
<div class="self-center justify-center px-8 text-center uppercase -my-80 py-28 text-ts3 font-title-preset">Text Headline Goes Here</div>
</div>
</section>
In my head, for the oval, I would just do margin:auto; overflow:hidden, and width:100% on the div, but that isn't working.
Any pointers on how you would approach this from a better practice perspective?
Thanks!
The approach you're taking separates the oval from the content within. A better way would be to keep them together by wrapping them both in a relatively positioned div and making the oval absolutely positioned to the top and center (then using a transform to center again which is a common pattern) and adding overflow-hidden to the relatively positioned element.
Not sure what your text-ts3 class is meant to do since you did not share your config. But this example uses a few breakpoints with text size classes defined for each and some negative top margin on the text to make things look more vertically centered. Here is the example running on Tailwind Play https://play.tailwindcss.com/3zWymGzXPn
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<section id="reading" class="border border-transparent pt-12">
<div class="overflow-hidden relative mx-auto md:container h-72">
<div class="border border-black rounded-[50%] w-[686px] h-full absolute top-0 left-1/2 -translate-x-1/2"></div>
<div class="h-full flex items-center justify-center max-w-[686px] mx-auto">
<div class="text-center uppercase -mt-4 sm:-mt-6 md:-mt-8 text-5xl sm:text-6xl md:text-7xl max-w-xs sm:max-w-sm">Text Headline Goes Here</div>
</div>
</div>
</section>
You can set the width of the oval to 120% (or a fixed with per breakpoint) and the shrink to 0, so it does not shrink.
<section id="reading">
<div class="flex h-screen w-full justify-center overflow-hidden bg-yellow-100">
<div class="mt-12 flex h-56 w-[120%] shrink-0 items-center justify-center rounded-[50%] border border-slate-300">
<div class="font-semibold">text goes here.</div>
</div>
</div>
</section>
See example in tailwind play.
I have managed to create a border which is cut at an angle in the following way ->
https://play.tailwindcss.com/b9oILu69my
Basically, I have a big container, inside of it I have a smaller container where I'm placing the border and setting the color of the bottom/right borders to transparent, in this way achieving what I am looking for.
Now I am trying to do the same thing, however, I want the border to be placed on the bottom-right side instead of the top-left
I've tried hundreds of variations of the code shown in the playground, but to no avail.
To be even more precise in what exactly I am trying to achieve ->
Detailed example
Any help would be appreciated!
I would take a somewhat different approach, by using an absolute positioned rotated div, within a div with overflow-hidden. If you keep the main image (the yellow square) centered with m-auto, the border will be the same size on both sides. On the yellow div you need to set a z-index that is higher then the rotated div.
<div class="flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
<div class="relative flex m-auto h-40 w-40 overflow-hidden rounded-lg">
<div class="absolute top-8 left-8 m-auto h-96 w-96 bg-blue-200 rotate-45"></div>
<div class="top-3 z-30 right-3 m-auto rounded-lg h-32 w-32 bg-yellow-300"></div>
</div>
</div>
You can find my Tailwind playground example here
You can play with the height and width of the div’s using arbitrary values, like w-[48rem] and rotate-[60deg].
Edit: this example looks more like yours.
Hope this helps.
I'm wondering how can I remove background color from an existing div for a specific xl screen size? I want something like this background-color:unset, is this possible with tailwind.css?
<div class="fixed bottom-0 bg-baseorange p-4 left-0 w-full z-10 xl: bg-none xl:absolute lg:absolute xl:bottom-22 xl:right-20 lg:bottom-22 lg:right-20">
</div>
You can use xl:bg-transparent.
In Tailwind, the class bg-transparent sets the css property background-color: transparent;
Tailwind documentation:
https://tailwindcss.com/docs/background-color
I am trying to set my Login section's background opacity using bg-opacity-75, but when I add that to my className, background color will just disappear. And if I use opacity-75, all child-div will be transparent as it should, if I use opacity-100, background color will just disappear and only input field is visible, it's kinda wired. In addition, I'm using default tailwind.config file with tailwind v2.0.2.
Here's my code:
...
<div className={"h-screen w-screen py-10 lg:w-3/6"}>
<div
className={"bg-gray-50 h-full max-w-md rounded-2xl bg-opacity-75 shadow-md mx-auto md:max-w-lg hover:shadow-lg transition-shadow"}>
<Logo/>
<Text/>
...
I aslo tried inline css, still not working.
using bg-opacity-75(there sholld be a white transparent area behind inputs)
I guess you are looking for something like this:
<div class="bg-green-400 h-32">
<div class="bg-gray-50 h-full w-6/12 mx-auto bg-opacity-50">
<div>Your Opacity child div here</div>
</div>
</div>
Opacity
Use opacity Keyword only, for version 2.2.7 Tails wind
example:
<div
className = "opacity-75 bg-red-300">
</div>
Is there a way to overlay linear-gradient on a background image WHEN the background image is not set in CSS?
This is my generated markup and I can't change it:
<div class="card bg-inverse">
<img class="card-img" src="img/major-search-result.jpg" alt="Card image cap">
<div class="card-img-overlay d-flex align-items-end">
<h4 class="card-title">Accounting</h4>
</div>
</div>
And I would like to make the background image slightly tinted. I know it can be done if the background image is also set in CSS like this:
.tinted-image {
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
/* bottom, image */
url(image.jpg);
}
But what if the background image cannot be set in CSS and generated by the CMS? Is it possible to ONLY set the linear-gradient with CSS and not the actual background image?