DEV Community

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

Posted on

7 2

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
Chisonm
Comment hidden by post author

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

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs