I'm using TailwindCSS and looking to place a decorative background image at the bottom-center of a grid item. However, using the bg-fixed class makes the image relative to the entire DOM.
Is there any way to fix a background image so that it's fixed to its div?
See below:
Instead of using a fixed position, you can use an absolute position.
Here's an example using the absolute positioning on the bg image fixed to panel's bottom:
<div class="flex h-screen">
<div class="w-1/2 overflow-auto border-8 bg-green-400">
<header class="text-center">Scrollable Content</header>
<p class="h-[5rem] border-2">Text</p>
<p class="h-[5rem] border-2">Text</p>
<p class="h-[5rem] border-2">Text</p>
<p class="h-[5rem] border-2">Text</p>
<p class="h-[5rem] border-2">Text</p>
<p class="h-[5rem] border-2">Text</p>
<p class="h-[5rem] border-2">Text</p>
<p class="h-[5rem] border-2">Text</p>
<p class="h-[5rem] border-2">Text</p>
<p class="h-[5rem] border-2">Text</p>
<p class="h-[5rem] border-2">Text</p>
<p class="h-[5rem] border-2">Text</p>
<p class="h-[5rem] border-2">Text</p>
<p class="h-[5rem] border-2">Text</p>
<p class="h-[5rem] border-2">Text</p>
</div>
<div class="relative w-1/2 bg-pink-400">
<header class="text-center">Decorative Panel</header>
<div class="absolute bottom-0 right-[30%] h-[10rem] w-[10rem] border-2 bg-[url('https://c4.wallpaperflare.com/wallpaper/383/891/589/colorful-abstract-simple-wallpaper-preview.jpg')] bg-cover">Fixed Panel</div>
</div>
</div>
<div class="h-screen border-8 bg-slate-400">Next Page...</div>
Tailwind-play
Explanation about the structure:
I split the composition into 2 divs. Each div takes 100vh (h-screen). We're going to focus on the first div.
This div is composed of 2 other divs, each taking half the screen's width (w-1/2). The first part contains scrollable content (green), and the second contains the decorative panel (pink). In the decorative panel, I placed a small panel with a background image. This bottom panel is relative to the decorative panel.
The decorative panel got the relative class, and the bottom panel got the absolute class.
In order to center the bottom panel to the middle of his parent element, I used the bottom-0 right-[30%] utilities.
Related
Changed the height of the flexbox (h-40) and set the image height to full (h-full). In this case the height of the image changes and fills the entire container, keeps the aspect ratio which is good and expected.
But the container div (with blue background) does not change in width, just in height.
How can I make this div to be as same width as the image?
https://codepen.io/lordjancso/pen/eYKOVRN
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-row justify-around h-40">
<div class="bg-blue-700">
<img class="h-full" src="https://picsum.photos/500/700">
</div>
<div class="bg-blue-700">
<img class="h-full" src="https://picsum.photos/500/700">
</div>
</div>
Apply the w-fit utility on the images' container. w-fit, which is the width: fit-content; class in CSS, will use the available space, but never more than max-content.
<div class="flex flex-row justify-around h-40 w-fit">
<div class="bg-blue-700">
<img class="h-full" src="https://picsum.photos/500/700">
</div>
<div class="bg-blue-700">
<img class="h-full" src="https://picsum.photos/500/700">
</div>
</div>
Tailwind-play
I have a grid layout set-up with windicss with this code
<div class="grid grid-cols-2 w-auto">
<div class="w-15">
<img class="h-15" src="https://starnumber.tk/logo.png" alt="logo">
</div>
<div>
<p class="text-left font-mono"><span class="text-xl">StarNumber12046</span><br>Svelte lover</p>
</div>
but the div takes too much space
Apparently, setting the display to an inline-flex fixes the problem.
I using tailwind-overflow, for horizontal scroll in right side.
Bellow example of my code:
<div className="bg-red-300">
<div className="bg-red-400">
<div className="container mx-auto pl-3 pr-3 pt-6 pb-6 flex space-x-2 overflow-x-auto">
<div className="flex space-x-2">
<div>Explore:</div>
<div className="font-bold underline">Shoes</div>
<div className="font-bold underline">Clothing</div>
<div className="font-bold underline">Accessories</div>
<div className="font-bold underline">Premium</div>
<div className="font-bold underline">Sport</div>
<div className="font-bold underline">Shop All</div>
</div>
</div>
</div>
</div>
#1 Why word Shop All was break, when screen is mobile? How fix is it?
screenshot:
demo: https://superb-pothos-b7b687.netlify.app/tailwind-overflow
#2 How I can hide scroll in tailwind?
#1 Whitespace
In order to disable the breaking of your words, you can simply use Whitespace.
It looks like the class you might want to use here is whitespace-nowrap. You can either apply it to your whole document or simply to a specific div:
<div className="font-bold underline whitespace-nowrap">Shop All</div>
#2 Hide Scroll-bar
To hide the scrollbar you can use Overflow.
overflow-hidden will hide both horizontal and vertical scrollbars.
overflow-x-hidden will hide the horizontal scrollbar (which is what you need here).
overflow-y-hidden will hide the vertical scrollbar.
In your code it can be implemented this way:
<div className="container mx-auto pl-3 pr-3 pt-6 pb-6 flex space-x-2 overflow-x-auto overflow-hidden">
I'm using Tailwind CSS and I recently created a link using <a>, <p> and <div>. But the clickable area from <a> tag is bigger than I want, I just want in the text, but the box are in div.
I'll show my code:
<div class="mt-5">
<a :href="route('login')" class="flex justify-center">
<img src="../../Assets/Img/menorq.svg" class="w-4 h-4 mt-1" alt="">
<p class="text-purple-600">Back to login</p>
</a>
</div>
Here's how it's going:
You can shrink the anchor's flex box to contain just the content by using inline-flex and then center the content inside the surrounding div. For example:
<div class="mt-5 text-center">
<a :href="route('login')" class="inline-flex align-center">
<img src="../../Assets/Img/menorq.svg" class="w-4 h-4 mt-1" alt="">
<p class="text-purple-600">Back to login</p>
</a>
</div>
I'm just getting started with tailwind and I would like to grid essentially a row of images that fit the container.
Currently I am just stubbing in 2 photos for testing/getting to know tailwind purposes.
<main class="mt-12 lg:mt-32">
<section class="container mx-auto px-6">
<div class="w-full lg:flex items-center">
<div *ngFor="let item of photos">
<p class="text-md lg:text-xl font-light text-gray-800 mb-8">
{{item.description}}
</p>
<div class="grid grid-col-2 gap-2">
<img [src]="image" *ngFor="let image of item.images"
class="object-contain shadow rounded border-none">
</div>
</div>
</div>
</section>
</main>
This code is causing the 2 images to essentially appear underneath each other as seen here
https://i.imgur.com/vhSBkc7.png
Thank you for any help.
Your class should me grid-cols-2 and the img tag should have col-span-1. Checkout Grid Columns
<div class="grid grid-cols-2 gap-2"> // grid-cols-2
<img [src]="image" *ngFor="let image of item.images" class="col-span-1 object-contain shadow rounded border-none"> // col-span-1
</div>