im trying to put image in the background by using background-img:url(imageLing)
but not working and it's return to me when inspect the element background-image: url(assets/backgrounds/5.jpg);
what is the issue :
this is my code
//login page
<LoginWrapper img={`assets/backgrounds/${randomImage}.jpg`}>
<Wrapper>
<LoginForm onClickLogin={login} />
</Wrapper>
</LoginWrapper>
//css file using styled- components
interface LoginProps {
img: string;
}
export const LoginWrapper = styled.div<LoginProps>`
display: flex;
align-items: center;
justify-content: center;
height: 93vh;
background-image: url(${({ img }) => img});
background-size: cover;
background-repeat: no-repeat;
`;
React generally bundles your project before deployment which minifies images and changes image path. Hence, passing the path via props will not work. In order to get images to load properly, you have to reference them dynamically as an import.
Login Page
//login page
import img from './assets/backgrounds/bg.gif'; // <= update this path according to your folder structure, i've added this path as an example
<LoginWrapper img={img}>
<Wrapper>
<LoginForm onClickLogin={login} />
</Wrapper>
</LoginWrapper>
CSS File Option 1 (using img from props)
//css file using styled- components
// interface LoginProps {
// img: string;
// }
export const LoginWrapper = styled.div`
display: flex;
align-items: center;
justify-content: center;
height: 93vh;
background-image: url(${({ img }) => img});
background-size: cover;
background-repeat: no-repeat;
`;
CSS File Option 2 (importing image in this file itself)
//css file using styled- components
import img from './assets/backgrounds/bg.gif'; // <= update this path according to your folder structure, i've added this path as an example
export const LoginWrapper = styled.div`
display: flex;
align-items: center;
justify-content: center;
height: 93vh;
background-image: url(${img});
background-size: cover;
background-repeat: no-repeat;
`;