Home / Questions / 564192
Accepted
JoseMgz_Ux
Asked: 2022-10-26 05:41:09 +0800 CST 2022-10-26 05:41:09 +0800 CST

Logo appears behind the background - ReactJS

  • 772

I am working on a project with ReactJs and I want to make a background with a gradient from red to white and a logo will go on top.

I am using MUI and in the sxprops I put the below but the logo appears behind the gradient (background) instead I do place it on a normal background of a single color (backgroundColor) if the logo appears in front of me.

<Grid
  item
  xs={false}
  sm={4}
  md={20}
  sx={{
      backgroundImage: 'url(https://...)',
      backgroundRepeat: 'no-repeat',
      //backgroundColor: 'linear-gradient(0deg, rgba(195,34,34,1) 0%, rgba(249,249,249,1) 100%)'//Logo detras
      background: "#D52323", //Logo delante
      backgroundSize: '100%',
      backgroundPosition: 'center',
   }}
/>            
</Grid>
javascript

1 Answers

  1. Best Answer

    When we talk about css the order of the properties matters, when you use individual properties the order is from top to bottom with the lower one being the priority and when you use a single property (background) the order is from left to right with the lower one being the priority. left, this is when you use commas to define the different options, in this case, different backgrounds, but if you don't use commas, all the backgrounds are applied in order, I leave you one last example that I think is what you want to do (see in full page)

    .example-class {
  background: linear-gradient(0deg, rgba(195,34,34, 1) 0%, rgba(249, 249, 249, 1) 100%);
  background-image: url('https://www.ngenespanol.com/wp-content/uploads/2018/08/La-primera-imagen-de-la-historia-770x413.jpg');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  height: 100px;
}

.example-class2 {
  background-image: url('https://www.ngenespanol.com/wp-content/uploads/2018/08/La-primera-imagen-de-la-historia-770x413.jpg');
  background: linear-gradient(0deg, rgba(195,34,34, 1) 0%, rgba(249, 249, 249, 1) 100%);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  height: 100px;
}

.example-class3 {
  background: url('https://www.ngenespanol.com/wp-content/uploads/2018/08/La-primera-imagen-de-la-historia-770x413.jpg'), linear-gradient(0deg, rgba(195,34,34, 1) 0%, rgba(249, 249, 249, 1) 100%);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  height: 100px;
}

.example-class4 {
  background: linear-gradient(0deg, rgba(195,34,34, 1) 0%, rgba(249, 249, 249, 1) 100%), url('https://www.ngenespanol.com/wp-content/uploads/2018/08/La-primera-imagen-de-la-historia-770x413.jpg');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  height: 100px;
}

.gradientArribaTransparente-imagenAbajo {
  background: linear-gradient(0deg, rgba(195,34,34, 0.8) 0%, rgba(249, 249, 249, 0.8) 100%), url('https://www.ngenespanol.com/wp-content/uploads/2018/08/La-primera-imagen-de-la-historia-770x413.jpg');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  height: 100px;
}

.loQueBuscas {
  background-image: url('https://www.ngenespanol.com/wp-content/uploads/2018/08/La-primera-imagen-de-la-historia-770x413.jpg'), linear-gradient(0deg, rgba(195,34,34, 1) 0%, rgba(249, 249, 249, 1) 100%);
  background-repeat: no-repeat;
  background-position: center;
  height: 100px;
}
    <div class="example-class"></div>
<div class="example-class2"></div>
<div class="example-class3"></div>
<div class="example-class4"></div>
<div class="gradientArribaTransparente-imagenAbajo"></div>

<div class="loQueBuscas"></div>

    • 2