I've been experimenting with various methods to display a background image underneath the "box" in styled components. How can I pass an image as a prop into the background image of the box with the image stored in the array of objects? I'm unsure if it's a syntax issue or if this functionality is not supported. Any assistance would be highly appreciated!
import styled from "styled-components";
import px2vw from "../../../../utils/px2vw";
import {StyledIconBase} from '@styled-icons/styled-icon'
import travelImg from "./travelBackground2.png";
export const BackgroundImage = styled.div`
border: 1px solid #000;
background-repeat: no-repeat;
width: 100%;
height: 850px;;
`;
export const IconStyleWrapper = styled.div`
${StyledIconBase} {
height: 35px;
width: 35px;
padding-left: ${px2vw(42)};
}
`
// Other styled components...
import React from "react";
import styled from "styled-components";
import { Container, Box, BoxTitle, BoxText, Header, HeaderLinks, HeaderText, HeaderOffSet, BackgroundImage } from "./styles/HomeStyles"
export const boxData = [
{
id: 0,
title: "Travel",
text: "Check out some Travel Stories!",
bgColor: "#D5CAFA",
hoverColor: "#e3dcfa",
image: require("./styles/travelBackground2.png"),
link: "travel"
},
// Other box data entries...
];
const headerData = [
{
id: 0,
text: "Articles",
link: "/articles"
} ,
// Other header data entries...
]
export default function HomePage() {
return (
<div class="background">
<Header>
<HeaderOffSet>
Kyle Longrich
</HeaderOffSet>
{headerData.map(data => (
<HeaderLinks>
<HeaderText key={data.id} as="a" href={data.link}> {data.text} </HeaderText>
</HeaderLinks>
))}
</Header>
<Container>
{boxData.map(box => (
<Box key={box.id} bgColor={box.bgColor} BackgroundImage={box.image} as="a" href={box.link}>
<BoxTitle>{box.title}</BoxTitle>
<BoxText>{box.text}</BoxText>
</Box>
))}
</Container>
</div>
);
}