MaterialUI Box takes over background image

Question

I have a react component that contains a forms and it is formatted as follows:

<Box
      display="flex"
      justifyContent="center"
      alignItems="center"
      style={{ minHeight: "100vh", backgroundColor: "gray", opacity: "0.8" }}
    > ...
</Box>

This componenent, called Form is then passed in App.js as follows:

import React from "react";
import Form from "./components/Form";

const sectionStyle = {
  height: "100vh",

  backgroundImage:
    "url('www.blablabla.com/img.jpg') ",

  backgroundRepeat: "no-repeat",
  backgroundSize: "cover"
};

const App = () => {
  return (
    <div style={sectionStyle}>
      <Form />
    </div>
  );
};
export default App;

However, the results I get is this one:

I added the opacity to better show that my Box component is 'stretched' all over the window, while I would like it to just wrap its content, so that if some opacity is applied, it will only appear I side the Box, and the background image will be normal.

How can I achieve this?

Answer 1

material-ui Box's default component is a div. see material-ui Box

A div's default behavior is to stretch horizontally across the available space. That is why your Box is stretching horizontally. Where is the default size of a div element defined or calculated?

The minHeight: "100vh" style you are applying to the Box is telling it to stretch across the available vertical space. That is why your Box is stretching vertically. see Fun with Viewport Units

Perhaps using the Grid component as a wrapper will give you what you are looking for

   <Grid container className={props.classes.sectionStyle}
                          direction="column"
                          justify="space-evenly"
                          alignItems="center"
   >
       <Grid item>
           <Form />
       </Grid>
   </Grid>

This would change your code to be:

import React from "react";
import {Grid} from '@material-ui/core';
import Form from "./components/Form";

const sectionStyle = {
  height: "100vh",

  backgroundImage:
    "url('www.blablabla.com/img.jpg') ",

  backgroundRepeat: "no-repeat",
  backgroundSize: "cover"
};

const App = () => {
  return (
    <Grid style={sectionStyle}
        container
        direction="column"
        justify="space-evenly"
        alignItems="center"
    >
      <Grid item>
        <Form />
      </Grid>
    </Grid>
  );
};
export default App;

Answer 2

I would suggest you to use pseudo elem like:after and :before

Here is an example.

.background-filter::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: .8;
    background: red;
}

.background-filter {
  position: relative;
}

.background {
  background-image: url('https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg');
  width: 200px;
  height: 200px;
}
.background span{
position: absolute;
    z-index: 1;
    }

<div class="background background-filter"><span>Hello World I am text with background blur</span></div>

Do what ever you want to apply to ::after wont effect the form above