html css flexbox background-color transparent

Transparent background behind a flex-item

I have the following code:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    body {
        padding: 0;
        margin: 0;
        grid-template-areas: usrdscr;
    }

    main .usrcontainer {
        grid-area: usrdscr;
        display: flex;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
        background-color: rgba(6, 6, 92, 0.335);
        width: 100%;
    }

    main .usrcontainer .imgbkg {
        background-color: transparent;
        align-self: center;
    }

    main .usrcontainer .imgbkg img {
        max-height: 105px;
        justify-content: right;
    }

    main .usrcontainer p {
        color: black;
        align-content: center;
        padding-left: 20px;
        min-height: 130px;
    }

    main .usrcontainer .usrdscr {
        width: 90%;
    }

    main .usrcontainer .price {
        font-size: xx-large;
        max-width: 120px;
        text-align: left;
        padding-right: 40px;
    }

    main .usrcontainer .pricenote {
        text-align: left;
        align-content: end;
        padding-bottom: 10px;
    }

    main .usrcontainer .stars {
        justify-self: center;
        align-self: start;
        padding: 30px;
    }
</style>
</head>

<body>
    <main>
        <div class="usrcontainer">
            <div class="imgbkg"><img src="https://source.unsplash.com/random/105x105" alt="Foto usuário redondo"></div>
            <p class="usrdscr">Name, <strong>Job</strong> <img src="https://source.unsplash.com/random/15x15"
                alt="Map pin"> 5Km
                <br><br>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus vero ex debitis eligendi sed
            non maxime vitae molestias aperiam quos.
            </p>
            <div class="cardpreco">
                <img class="stars" src="https://source.unsplash.com/random/200x15" alt="4 Estreas">
                <p class="price">R$200,00 / hora</p>
                <p class="pricenote">Lorem, ipsum dolor.</p>
            </div>
        </div>
    </main>
</body>

</html>

I'm trying to make it so that the first image (that is inside the "imgbkg" div) has no background-color behind it. Now the first image is using the same background-color as the "usrcontainer" div. I tried to set "background-color: transparent", as shown but, it didn't work. I tried to search and found that using "flex: 1" could help but, still the same. Any help with this plsss????

To make it more clear, now I'm getting this:

And I'm trying to do something like this:

Solution

Can I make the first image (that is inside the imgbkg div) have no background-color?

No, there is no way to do that while .imgbkg is placed inside .usrcontainer, But you can achieve it if you bring it outside and then wrap both .imgbkg and .usrcontainer in a flex container and with a little help of CSS adjustments (I have added comments in CSS).

body {
  padding: 0;
  margin: 0;
  grid-template-areas: usrdscr;
}
/* Added new class */
.wrapper {
  display: flex;
  box-sizing: border-box;
  width: 100%;
}
/* this one to make sure it's aligned with .usrdscr */
.imgbkg {
    align-content: center;
}
main .usrcontainer {
  /* grid-area have no effect without display: grid */
  /* grid-area: usrdscr; */
  display: flex;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
  background-color: rgba(6, 6, 92, 0.335);
  width: 100%;
}

main .usrcontainer .imgbkg {
  background-color: transparent;
  align-self: center;
}

main .usrcontainer .imgbkg img {
  max-height: 105px;
  justify-content: right;
}

main .usrcontainer p {
  color: black;
  align-content: center;
  /* commented this to make text closer to image */
  /* padding-left: 20px; */
  min-height: 130px;
}

main .usrcontainer .usrdscr {
  width: 90%;
}

main .usrcontainer .price {
  font-size: xx-large;
  max-width: 120px;
  text-align: left;
  padding-right: 40px;
}

main .usrcontainer .pricenote {
  text-align: left;
  align-content: end;
  padding-bottom: 10px;
}

main .usrcontainer .stars {
  justify-self: center;
  align-self: start;
  padding: 30px;
}

<main>
  <div class="wrapper">
    <div class="imgbkg"><img src="https://source.unsplash.com/random/105x105" alt="Foto usuário redondo" /></div>
    <div class="usrcontainer">
      <p class="usrdscr">
        Name, <strong>Job</strong> <img src="https://source.unsplash.com/random/15x15" alt="Map pin" /> 5Km <br /><br />Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus vero ex
        debitis eligendi sed non maxime vitae molestias aperiam quos.
      </p>
      <div class="cardpreco">
        <img class="stars" src="https://source.unsplash.com/random/200x15" alt="4 Estreas" />
        <p class="price">R$200,00 / hora</p>
        <p class="pricenote">Lorem, ipsum dolor.</p>
      </div>
    </div>
  </div>
</main>