DEV Community

Cover image for Adding Dynamic Css Background Image Using Styled Components In React
Rahul Kumar Choudhary
Rahul Kumar Choudhary

Posted on

Adding Dynamic Css Background Image Using Styled Components In React

import React from "react";
import styled from "styled-components";


const Home=()=>{
return ( 
<Wrap backgroundImage={backgroundImage}> 
</Wrap>
)
}


const Wrap = styled.div`
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: ${(props) =>
    `url(${require(`../images/${props.backgroundImage}`).default})`};
  display: flex;
  flex-direction: column;
  justify-content: space-between; //vertical alignment because of flex direction column
  align-items: center; //horizontal alignment because of flex direction column
`;

Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
drealtechie profile image
Femi Olagundoye

Pls I nee a video of this post

Collapse
 
chisonm profile image
Info Comment hidden by post author - thread only accessible via permalink
Chisonm

this doesn't work

Some comments have been hidden by the post's author - find out more