Struggling with getting my background image to adjust based on page content size. The app has a main div and sidebar navigation. Background styles are set for the main div:
const styles = makeStyles(theme => ({
backgroundStyle: {
flexGrow: 1,
padding: theme.spacing(3),
height: '100vh',
textAlign: 'center',
backgroundImage: `url(${Background})`,
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundSize: "cover",
backgroundAttachment: "fixed",
[theme.breakpoints.down('md')]: {
height: '100%'
}
}
height: '100vh' works until the navigation item extends beyond view height, cutting off the image. Setting height: '100%' solves it but doesn't fill screen when content is small. Issue persists in responsive view.
Conditionals were added:
return <main className={navListItem === 'Topic1' ? backgroundStyle : backgroundStyle2 }>
This solution feels repetitive as it introduces backgroundStyle2 class duplicating same style but with '100%' height instead of '100vh'.
Looking for a more efficient method to change background image based on content size without using fixed heights. Any suggestions?