Adding Dynamic Css Background Image Using Styled Components In React

Rahul Kumar Choudhary — Mon, 04 Oct 2021 02:10:17 +0000

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
`;

DEV Community: Rahul Kumar Choudhary

Adding Dynamic Css Background Image Using Styled Components In React