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