Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

154
Views
how can i change background's image opacity in material ui?

I want to change the opacity of background image. I can do this using plain html and css. Here is an example html and css markup.

<div class="demo-wrap">
  <div class="demo-content">
    <h1>Hello World!</h1>
  </div>
</div>

Here is the CSS

.demo-wrap {
  position: relative;
}

.demo-wrap:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  background-image: url('https://assets.digitalocean.com/labs/images/community_bg.png');
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}

.demo-content {
  position: relative;
}

I want to change the opacity of background image using Material UI. To do so I have used makeStyles hook of material Ui. I have made customStye and used it in className. Here is my code.

import React from 'react';
import {Box,Typography } from '@mui/material';
import { makeStyles } from '@material-ui/core/styles';


const CategoryCard = ({ image }) => {
    const useStyles = makeStyles({
        demowrap:{
            position:'relative'
        },
        '&::before':{
            content: '"',
            display: 'block',
            position: 'absolute',
            left: 0,
            top: 0,
            width: '100%',
            height: '100%',
            opacity: 0.6,
            backgroundImage: `url(${image})`,
            backgroundRepeat: 'no-repeat',
            backgroundPosition: '50% 0',
            backgroundSize: 'cover'
        },

        demoContent:{
            position:'relative'
        }
    })
  

    const classes = useStyles()
    return (
        <Box component="div" className={classes.demowrap}>
            <Box  component="div" className={classes.demoContent} > 
                <Typography component="p">Hello</Typography> 
            </Box>
        </Box>
    );
};

export default CategoryCard;

But I am not getting desired result. Image is not shown in the UI. Any help is appreciable. Thanks.

7 months ago · Juan Pablo Isaza
3 answers
Answer question

0

You need to put the background image into a pseudo-element of the parent

.demo-wrap::before {    
  content: "";
  background-image: url('https://placekitten.com/1200/800');
  background-size: cover;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  opacity: 0.75;

} and give the element itself a position relative and height and width according to this:

.demo-wrap {
position: relative; 
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;

}

You can also add an overlay with reduced opacity and background-color on top of the background image.

.demo-wrap::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: rgba(0,0,0,0.25);

}

7 months ago · Juan Pablo Isaza Report

0

You can try with this. I think that will be work.

const useStyles = makeStyles({
        demowrap:{
            position:'relative',
            '&:before':{
                  content: '""',
                  display: 'block',
                  position: 'absolute',
                  left: 0,
                  top: 0,
                  width: '100%',
                  height: '100%',
                  opacity: 0.6,
                  backgroundImage: `url(${image})`,
                  backgroundRepeat: 'no-repeat',
                  backgroundPosition: '50% 0',
                  backgroundSize: 'cover'
            }
        },
        demoContent:{
            position:'relative'
        }
    })
7 months ago · Juan Pablo Isaza Report

0

You can use a normal CSS method called filter() like that

filter: opacity(50% "any value you need");

Read More https://developer.mozilla.org/en-US/docs/Web/CSS/filter

7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs