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

Discussion (0)