Set Background Image using props in Styled Components

Question

This is the Home Component. I am passing the Details as props to Main component

import React from 'react'
import Main from '../components/Main'
import Navbar from '../components/Navbar'

const Home = () => {
  return (
    <div>
        <Navbar/>
        <Main
        title = "Model Y"
        text = "Schedule a Demo Drive"
        bgImg = "../assets/model-x.jpg"
        leftBtnText = "Custom Order"
        rightBtnText = "View Inventory"
         />
         
    </div>
  )
}

export default Home

This is the main components

import React from 'react';
import styled from 'styled-components';
import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';


const Container = styled.div`
   height: 100vh;
   width: 100%;
   /* background-image: url('../assets/model-y.jpg'); */
   background-image: ${props => `url(${props.bgImage})`};
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
   gap:15rem;
`;

const Heading = styled.div`
   flex:3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
`;

const Title = styled.h1`
   font-size: 2.7rem;
   font-weight: 700;
   color:#202328;
`;

const Text = styled.p`
   font-weight:500;
   font-size: 1rem;
   letter-spacing: 0.4px;
   cursor: pointer;
   color:#202328;
`;

const Line = styled.span`
  height: 1.1px;
  background-color: black;
  width: 100%;

`;

const Buttons = styled.div`
   display: flex;
   align-items: center;
   gap: 2rem;
`;

const Bottom = styled.div`
   flex:1;
   display:flex;
   flex-direction: column;
   align-items: center;
   gap:2rem;
`;

const ButtonLeft = styled.button`
    padding: 0.6rem 6rem;
    border-radius: 0.5rem;
    border: none;
    font-size: 1rem;
    font-weight: 900;
    background-color: rgba(23,26,32,0.8);
    color: white;
    opacity:0.80;
    cursor: pointer;
`;

const ButtonRight = styled(ButtonLeft)`
   background-color: white;
   color: #202328;
   opacity:0.70;
`;

const DownArrow = styled.div`
   animation:bounce infinite 1s;
   color:white;
   cursor:pointer;
`;

const Main = (props) => {
  return (
    <Container bgImage={props.bgImg}>
    <Heading>
        <Title>{props.title}</Title>
        <Text>
         {props.text}
        </Text>
        <Line/>
    </Heading>
    <Bottom>
        <Buttons>
            <ButtonLeft>{props.leftBtnText}</ButtonLeft>
            <ButtonRight>{props.rightBtnText}</ButtonRight>
        </Buttons>
        <DownArrow>
            <KeyboardArrowDownOutlinedIcon fontSize='large'/>
        </DownArrow>
    </Bottom>
    </Container>
  )
}

export default Main

The file structure (for Images path)

enter image description here

I want the background Image I am passing as props to be visible.

After using the above code it looks like this

enter image description here

As you can see the Image is not visible behind but in inspect you can clearly see the correct url for image is there.

Please Help.

Syaikhan Agil · Accepted Answer · 2023-01-23T07:02:12.367

0

You should import the background image.

import bg from '../assets/model-x.jpg';

and pass the imported bg to the bgImg props. like this:

import React from 'react'
import Main from '../components/Main'
import Navbar from '../components/Navbar'
import bg from '../assets/model-x.jpg';

const Home = () => {
  return (
    <div>
        <Navbar/>
        <Main
        title="Model Y"
        text="Schedule a Demo Drive"
        bgImg={bg} 
        leftBtnText = "Custom Order"
        rightBtnText = "View Inventory"
         />
         
    </div>
  )
}

export default Home

edited Jan 23 '23 at 07:02

answered Jan 23 '23 at 06:58

Syaikhan Agil

66
5

But suppose I want to have many main components with different images , then I would have to import each and every image. Is there any alternate way to do this? – Nilay Singh Jan 23 '23 at 07:53
Yes, you have to import images one by one. But, you can use an array to make things easier.. Import the images and put them into an array, then you can use the map function for loop in react component – Syaikhan Agil Jan 23 '23 at 10:19

Set Background Image using props in Styled Components

1 Answers1

Linked