I am trying to set the background image under my components. But it always is on top, so my elements are under it.
Or in the second variant, all works fine, except that I can't apply blur-xl only to the background. it applies to background and Layout elements.
bg-repeat-y needs me to copy down my image, am I right?
import moons from './../assets/moon.svg'
const Background = ({ children }) => {
return (
<div className='bg-white '>
<div className='min-h-screen min-w-screen bg-repeat-y' style={{ backgroundImage: `url(${moons})` }}>
<div className="div"></div>
</div>
{children}
</div>
);
}
export default Background;
This Background element wraps other elements in Laoyout in react-router-dom
export const AppLayout = () => (
<div>
<Background>
<NewNavbar />
<Outlet />
<Footer />
</Background>
</div>
);
Help me, please!
try this, the blur will be applied between your components & background image
export const AppLayout = () => (
<Background>
<div class="backdrop-blur-xl h-full">
<NewNavbar />
<Outlet />
<footer />
</div>
</Background>
);
if you have any queries, refer to this link
https://play.tailwindcss.com/yX9aAMagRj
For the first variant/approach that you mentioned, you can set the z-index of the background to negative using the class -z-10 . Then your background will not come over your other elements.
Related
Home page in NextJS, styled with TailwindCSS, is working as expected. I originally had the background image defined in the tailwind.config.js file and applied via styles (and there is no problem), but I would prefer the image optimization of next/Image.
// index.jsx
const Home = () => {
return (
<div className="flex min-h-screen flex-col items-center justify-center py-0">
<Image src='/images/background.png' fill={true} style={{ objectFit: 'cover' }} className='-z-10' alt='Alt text' />
<main className='flex w-full flex-1 flex-col items-center justify-center px-5 md:px-20 text-center bg-gradient-radial to-r from-black via-black/30'> {/* All content here is displaying as expected */} </main>
</div>
)
}
This works as expected. But, when I add an overall Layout.jsx to the site, the background image alignment is not behaving as I would anticipate.
// Layout.jsx
import Navbar from './Navbar.jsx'
import Footer from './Footer.jsx'
const Layout = ({ children }) => {
return (
<>
<Navbar />
<main>
{children}
</main>
<Footer />
</>
)
}
export default Layout
The background.png image no longer aligns with its parent <div>, but instead with the top of the screen. This means the navbar is sitting on top of the background image, obstructing some of the top portion.
Simultaneously, a gap now exists between the bottom of the background image and the top of the Footer, equal in height to the height of the Navbar.
I have tried all combinations of relative and absolute classes both the parent <div> and the child <Image>, without success.
Switching back to a tailwind.config.js defined background image and inserting it using e.g. className='bg-my_bg_image' solves the alignment issues, but no longer leverages NextJS next/Image optimization and hurts my site performance.
So the preferred solution would be to continue to use the next/Image component, aligned properly.
How to make the selected div element to be 100% in the inspect element tool in the picture below. I am using display:flex on .dvPageNotFound class and I want to apply height:100% on the div element inside it. If we put display:flex on parent element then all the child elements gets stretched by default, but here I don't get my child element stretched. I don't know why? I am using 12 column grid system same as bootstrap 4 grid Any help would be appreciated.
HERE IS THE CODE -
import React from 'react';
import { Link } from 'react-router-dom';
const PageNotFound = () => {
return (
<>
<div className="dvPageNotFound d-flex">
<div class='col-12'>
<h1 className="heading-lg">Page Not Found</h1>
<p className="my-3">The page you are looking for we coudn't found.</p>
<Link to="/" className="btn btn-black">
Back to Homepage
</Link>
</div>
</div>
</>
);
};
export default PageNotFound;
This worked for me. I added height: 100vh and added m-auto classes which we get from the 12 column grid.
import React from 'react';
import { Link } from 'react-router-dom';
const PageNotFound = () => {
return (
<>
<div className="dvPageNotFound d-flex justify-content-center align-items-center" style={{ height: '100vh' }}>
<div className="m-auto">
<h1 className="heading-lg">Page Not Found</h1>
<p className="my-3">The page you are looking for we coudn't found.</p>
<Link to="/" className="btn btn-black">
Back to Homepage
</Link>
</div>
</div>
</>
);
};
export default PageNotFound;
I'm having trouble with a design that consists in a 6 columns grid and a text ahead it. When I hover the text, the grid child has to change its background to an image (only the column hovered). It works fine, but I have the problem hovering behind the text... it seems impossible. Is there any solution? thanks!
const [dissapear, setDissapear] = useState([20]);
return (
<PageLayout
className="bg-softBlack"
>
<div className="relative h-[480px]">
<h1
className="absolute top-32 uppercase bg-transparent text-gray-10 text-[9.028vw] leading-[0.9] tracking-[-0.06em]"
style={{ zIndex: 1000, mixBlendMode: "difference" }}
>
welcome <br />
to the LAB.
</h1>
<div className="w-full h-full absolute left-0 top-0 grid grid-cols-6">
{array.map((e, idx) => (
<div
key={idx}
className="bg-black relative"
onMouseEnter={() => setDissapear((prev) => [...prev, idx])}
>
{dissapear.some((e) => e === idx) && (
<Image src={e} alt="background" layout="fill" />
)}
</div>
))}
</div>
</div>
</PageLayout>
I'm using next js, thanks
No sure to be sure to understand, but you seems using tailwindcss.
maybe group in tailwind doc might be what you are look for.
Anyone, please help, I am trying to display the full image of a small image which are in the gallery.
When I scale the display Modal is auto-resize and the image is not able to resize according to Modal even I use the image inside the Modal. Image overlapping while scaling.
Even I remove width also not workin
function Modalcenter(props) {
return (
<Modal
{...props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Decoration
</Modal.Title>
</Modal.Header>
<Modal.Body>
<img src={G1s} alt="G1s" width="1080" />
</Modal.Body>
<Modal.Footer>
<Button onClick={props.onHide}>Close</Button>
</Modal.Footer>
</Modal>
);
}
function Example() {
const [modalShow, setModalShow] = React.useState(false);
return (
<>
<img src={G1} alt="G1" width="200" onClick={() => setModalShow(true)} />
<Modalcenter
show={modalShow}
onHide={() => setModalShow(false)}
/>
</>
);
}
Apply this class to the image
<img src="..." className="img-fluid" >
which is the default class, provided by Bootstrap for making it responsive.
I am applying inline style to a div in React
If I do
<div style={{ backgroundImage: `url(${process.env.IMAGES}/${ID}.png)` }}>{children}</div>
it works fine, but on changing to
<div style={{ maskImage: `url(${process.env.IMAGES}/${ID}.png)` }}>{children}</div>
the style doesn't even show in the code inspector.
What could be wrong? Thank you
Since the mask needs vendor prefixes to work, you'll need to add them manually:
const Mask = ({ mask, children }) => (
<div style={{
WebkitMaskImage: mask,
maskImage: mask
}}>
{children}
</div>
)
ReactDOM.render(
<Mask mask="linear-gradient(black, transparent)">The big bad fox</Mask>,
root
)
div {
font-size: 2em;
}
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div id="root"></div>