Question 74170 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Can't set background under Layout components React and Tailwind CSS – Reactjs

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!

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search