CODEWITHSUNDEEP
htmlcss
Icemanind
Icemanind

Reputation: 48686

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?

Upvotes: 1

Views: 801

Answers (3)

andreas
andreas

Reputation: 16936

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">
          &nbsp;
        </div>
      </div>
      <div class="col-md-6">

      </div>
    </div>
  </div>
</div>

Upvotes: 0

Logan Rodie
Logan Rodie

Reputation: 693

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;
}

Upvotes: 0

random_user_name
random_user_name

Reputation: 26150

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/

Upvotes: 2

Related Questions