CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
Rob Terrell
Rob Terrell

Reputation: 2552

Image Overlay using JS styling

Currently, I am trying to place an overlay on top of a background image. For some reason I just can't seem to get the background color to lay on top of the image. Any suggestions would be greatly appreciated. I am using a lot of Material UI etc, so my styling is done using JS. 

import React from 'react'
import Background from '../images/background.jpg'

// MUI STUFF
import Grid from '@material-ui/core/Grid'
import Container from '@material-ui/core/Container'
import Box from '@material-ui/core/Box'
import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles(theme => ({
  background: {
    backgroundImage: `url(${Background})`,
    position: 'relative',
    objectFit: 'cover',
    width: '100%',
    height: 400,
    paddingTop: 70,
    margin: 0
  },
  card: {
    width: '100%'
  },
  overlay: {
    position: 'absolute',
    objectFit: 'cover',
    width: '100%',
    height: 400,
    margin: 0,

    backgroundColor: '#5BC2E7'
  }
}))

const Home = () => {
  const classes = useStyles()

  return (
    <Box>
      <div className={classes.overlay}>
        <Box className={classes.background}>
          <Container>
            Wyncode is so great and stuff. Track your jobs and stuff here.
          </Container>
        </Box>
      </div>
      <Box>
        <Container>More stuff will go here</Container>
      </Box>
    </Box>
  )
}

export default Home

Upvotes: 0

Views: 1260

Answers (1)

Sagi Rika
Sagi Rika

Reputation: 2979

try this css:

background: {
    backgroundImage: `url(${Background})`,
    position: 'relative',
    objectFit: 'cover',
    width: '100%',
    height: 400,
    paddingTop: 70,
    margin: 0
},
overlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    margin: 0,
    backgroundColor: '#5BC2E7'
  }

With this html:

<Box>
  <Box className={classes.background}>
    <div className={classes.overlay}>
      <Container>
        Wyncode is so great and stuff. Track your jobs and stuff here.
      </Container>
    </div>
  </Box>
  <Box>
    <Container>More stuff will go here</Container>
  </Box>
</Box>

Upvotes: 1

Related Questions