Overlaying two pictures... difficulties

@AIBug wrote:

Hello! I’m trying to overlay two pictures. And though I can do this, I’m having trouble overlaying the picture that i actually want.

The page shows a profile picture and a background picture. The profile picture is taken from speaker.profilepic, but the background picture is a set picture. I want both of them to be from speaker.profilepic, but whenever i try to do this, it messes everything up.

Here is my code:

html

  <div class="speaker-background">
    <img [src]="speaker?.profilePic" [alt]="speaker?.name">
    <h2>{{speaker?.name}}</h2>
  </div>
  <div class="ion-padding speaker-detail">
    <p>{{speaker?.about}} Say hello on social media!</p>
    <hr>

scss

.speaker-background {
  position: relative;

  display: flex;

  padding-top: var(--ion-safe-area-top);

  align-items: center;
  justify-content: center;

  flex-direction: column;

  height: calc(250px + var(--ion-safe-area-top));

  background: center / cover url(/assets/img/pastorBackground.jpg) no-repeat;
}

.speaker-background img {
  width: 100px;
  border-radius: 120px;
  margin-top: calc(-1 * var(--ion-safe-area-top));
}

to recap… I’m trying to grab the background photo from speaker.profilePic also. Right now, it is just a set photo in the scss. Is there a way to do this?
Thanks in advance for taking a look

Posts: 1

Participants: 1

Read full topic