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 (1)

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

Hacktoberfest is happening now!



It is a month-long celebration of open source. For a lot of devs, its their introduction to open source.


Check out the Hacktoberfest tag on DEV to keep up with the latest!