I'm trying to remove the scroll from the page, I do not understand what I'm doing wrong

Question

I want the page to look like the second image.I thought that with the overflow it would be enough to hide the rest of the image

This is the result:

This is what I want

.bgMentor{
 height: 100%;
 width: 100%;
 overflow:hidden;
 position:absolute;

  }
  
  .bgMentor img{
   min-width: 100%;
 min-height: 100%;
 position: absolute;
 top:50%;
 left: 50%;
 transform: translate(-50%,-50%);
 width: auto;
 height: auto;
  }

<div class="bgMentor">
       <img class="img-responsive" src="{{Storage::url('img/getamentor.png')}}"> 
      </div>

[This](https://stackoverflow.com/questions/16217355/automatically-resize-images-with-browser-size-using-css) might help. — Geshode, Jan 10 '18 at 00:43

score 0 · Answer 1 · answered Jan 10 '18 at 00:43

0

Try using overflow-y: hidden; instead of just overflow:;. If that doesn’t work, try putting the <Img> directly in the body and stylize it using a class=“bgMentor”.

answered Jan 10 '18 at 00:43

dandemo

397
1
5

score 0 · Accepted Answer · answered Jan 10 '18 at 01:56

0

Try adding a top and left value for your position: absolute element

.bgMentor{
    height: 100%;
    width: 100%;
    overflow:hidden;
    position:absolute;


    top: 0;
    left: 0;
  }

answered Jan 10 '18 at 01:56

jas7457

1,712
13
21

I'm trying to remove the scroll from the page, I do not understand what I'm doing wrong

2 Answers2