Icemanind Icemanind - 3 months ago 10
CSS Question

Making a div "overlap" container div

I am trying to making a page similar to this:
enter image description here

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">
&nbsp;
</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

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/

Comments