I attempted to design a profile page for my website users to have an image as a banner and their profile photo. I have achieved this:
https://i.sstatic.net/kFlrQ.jpg
However, when I apply the top-margin to the image, it both moves the image and expands the background, which is not the desired effect. I am aiming for this instead:
https://i.sstatic.net/Va5Wu.jpg
Upon reviewing my code, I noticed that the image appears to be repeated instead of simply fitting/cropping. Here is the code:
class Profiles extends React.Component{
render(){
return(
<div className="profile-container">
<div className="profile-header"
style={{ backgroundImage: `url(${UserProfile.User1.values.profileHeaderImag})`}}>
<img
src={UserProfile.User1.values.profileImg}
alt="profileImg"
className="profile-header-image-user"/>
</div>
<div className="profile-content">
<p> more</p>
</div>
</div>
)
}
}
and css
.profile-container {
margin-top: 3rem;
margin-bottom:5rem;
}
.profile-header {
width: 70% ;
height: 5% ;
max-height: 25rem;
margin-left: auto;
margin-right: auto;
background-color: blue;
border-radius: 20px;
}
.profile-header-image-user {
border-radius: 150px;
width: 130px;
height: 130px;
margin-left: 5%;
margin-top: 15%;
}
.profile-content {
width: 60%;
background-color: green;
margin-left: auto;
margin-right: auto;
}
My aim is to display the banner and profile pic as illustrated in the second image and maintain this layout when the screen size changes. Any suggestions on how to move the profile pic without affecting the size of the banner?
Thank you!