Image overlapping a div

Question

I want to make like this:

View Image

Here the circle is an image.

I tried this. But when I resize the window size the image circle gets shifted changes its postion. How can I fix that.

<div class="main">
    <img src=''>
    <div>Text Text Text</div>
</div>


.main {       
        background-color: #fbd449;
        border-radius: 4.5px;
        padding: 0.5rem 3rem;
        position: relative;
        margin-left: 9rem;
}

img {
        position: absolute;
        background-color: chocolate;
        width: 9rem;
        height: 9rem;
        top: -12%;
        border-radius: 50%;
        left: -20%;
}

Also for smaller screen the div height increases but the image is of same height. If possible could you also help me in this problem too.

Sorry, could not upload the image properly as I am a new user. — sajgkh, Jun 18 '20 at 03:40

Smlok · Answer 1 · 2020-06-18T04:01:40.077

0

If you want it in fixed position at all times then probably using % is not the best idea. Copy and paste the code below instead of your CSS and see if it helps you. It's not exact replica of your shared image, but you can play with correct sizes and positioning to get it right for your site.

.main { 
  background-color: #fbd449;
  border-radius: 4.5px;
  padding: 0.5rem 3rem;
  position: relative;
  margin-left: 9rem;
  width:12rem;
  height: 3rem;
}

img {
  position: absolute;
  background-color: chocolate;
  width: 7rem;
  height: 7rem;
  margin-left:-4rem;
  margin-top:-2rem;
  border-radius: 50%;
}

.main > div {
  padding-left:4rem
}

edited Jun 18 '20 at 04:01

answered Jun 18 '20 at 03:58

Smlok

598
6
19

For main you have given both relative and absolute – sajgkh Jun 18 '20 at 04:00
Thanks for the heads up sajgkh! Just edited my code to correct it. – Smlok Jun 18 '20 at 04:02

score 0 · Accepted Answer · answered Jun 18 '20 at 04:07

here is solution i think you are looking for..

if you use % then output will be different in mobile device.

in class .main and img you can change height and width as per your choice

.main {
  background-color: #fbd449;
  border-radius: 4.5px;
  padding: 0.5rem 3rem;
  position: fixed;
  margin-left: 9rem;
  top: 25px;
  left:-5px;
  height: 100px;
  width: auto;
  overflow: hidden;
}

img {
  position: fixed;
  background-color: chocolate;
  width: 9rem;
  height: 9rem;
  top: 12px;
  border-radius: 50%;
  left: 40px;
}

<div class="main">
  <img src=''>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

@sajgkh becasue percentage is not good idea mostly it is used for responsive design but here you are using position fixed css property also you can find out from here https://stackoverflow.com/questions/31728022/why-is-percentage-height-not-working-on-my-div/31728182#:~:text=Working%20with%20the%20CSS%20height%20property%20and%20percentage%20values&text=If%20you%20have%20not%20set,by%20content%20and%20other%20properties. — Maulik, Jun 18 '20 at 04:53

score 0 · Answer 3 · answered Jun 18 '20 at 04:12

Made few changes to the css

.main {       
        background-color: #fbd449;
        border-radius: 4.5px;
        padding: 0.5rem 5rem 0.5rem 9rem;
        position: relative;
        margin:2rem 9rem 0;
        width:100%;
        height:7rem;
        border-radius:10px;
        box-sizing:border-box;
}

img {
        position: absolute;
        background-color: chocolate;
        width: 9rem;
        height: 9rem;
        top: -1rem;
        border-radius: 50%;
        left: -1.5rem;
}

Image overlapping a div

3 Answers3

Related