Making a div "overlap" container div - html

Question

I am trying to making a page similar to this:
I am trying to make the profile picture div go "below" the wallpaper div. Here is my relavent code:
CSS code:
.profile-picture {
display: inline-block;
margin-left: 10px;
width: 150px;
height: 150px;
-ms-border-radius: 50%;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
-ms-background-size: cover;
background-size: cover;
background-image: url("../Images/profiles/default.png")
}
.wallpaper {
width: 100%;
-ms-background-size: cover;
background-size: cover;
background-image: url("../images/Wallpapers/default.png")
}
HTML Code:
<div class="col-md-6 roundedCorners" style="background-color: white">
<div class="wallpaper">
<div class="row">
<div class="col-md-6" style="text-align: left">
<div class="profile-picture">
</div>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
Right now, everything is working except its putting the rounded profile picture centered vertically within the image. I would like it to float outside the wallpaper, as shown in the image above. What am I missing?

Answer 1

Currently your code doesn't contain any positioning styles.
You most likely want to use position: absolute for the profile picture (with a bottom and left property to set the position). When you do this, you'll also want to add position: relative to the wallpaper, so that the absolute positioning is in relation to the wallpaper.
Here's the modified code, that will get you going in the right direction:
.profile-picture {
/* set the position to absolute */
position: absolute;
/* set the bottom to be slightly outside the wallpaper boundary. Adjust this number as desired */
bottom: -50px;
/* set the left where desired. Note I removed your margin-left, since you don't need both left and margin-left */
left: 10px;
display: inline-block;
width: 150px;
height: 150px;
-ms-border-radius: 50%;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
-ms-background-size: cover;
background-size: cover;
background-image: url("../Images/profiles/default.png")
}
.wallpaper {
/* set the position to relative, so the profile picture position is in relationship to the wallpaper container */
position: relative;
/* you may (or may not) need this. The profile is outside the wallpaper, so would be considered "overflow". */
overflow: visible;
width: 100%;
-ms-background-size: cover;
background-size: cover;
background-image: url("../images/Wallpapers/default.png")
}
To understand more about why you want the wallpaper set to position: relative and how that works, check out this article: https://css-tricks.com/absolute-positioning-inside-relative-positioning/

Answer 2

In addition to the other answers, you can put the profile picture "below" the wallpaper by using the z-index style. Add the following to each class style:
.profile-picture {
z-index:4;
}
.wallpaper {
z-index:5;
}

Answer 3

A possible solution would be, to position your elements.
With position:relative; in your container (.wallpaper) you can position your profile picture absolute in relation to the container, so with bottom: -70px; you can push it down to the exact position you need.
.profile-picture {
position: absolute;
bottom: -70px;
display: inline-block;
margin-left: 10px;
width: 150px;
height: 150px;
-ms-border-radius: 50%;
border-radius: 50%;
border: 5px solid white;
background-repeat: no-repeat;
background-position: center center;
-ms-background-size: cover;
background-size: cover;
background-image: url(https://unsplash.it/150/150)
}
.wallpaper {
position: relative;
width: 100%;
height: 200px;
-ms-background-size: cover;
background-size: cover;
background-image: url(https://unsplash.it/2000/200)
}
<div class="col-md-6 roundedCorners" style="background-color: white">
<div class="wallpaper">
<div class="row">
<div class="col-md-6" style="text-align: left">
<div class="profile-picture">
</div>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>