Recently, I designed my own personal website. To make it visually appealing, I decided to use a background picture as the header and placed my portrait as the avatar. My inspiration for the design was drawn from the sleek interface of Linkedin profiles. However, I encountered an issue while trying to stack these two images together.
In order to create this layout, I utilized bootstrap 3. Here's the HTML code that I used:
<div class="head-image">
</div>
<img src="assets/images/ava_Do.png" alt="ava_Do" id="ava_image">
For styling purposes, here is the CSS code that I implemented:
body, html {
height: 100%;
margin: 0;
}
.head-image {
/* Full height */
height: 35%;
background-image: url(../assets/images/image.png);
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: 0;
}
#ava_image {
position: absolute;
max-width: 100px;
top: 20%
z-index: 1;
}
My ultimate goal is to successfully stack these images in a similar manner to how they appear on a Linkedin profile.