make image fit full screen without scroll bars

Question

I need to make a header image full screen. I tried this:

<div class="wrapper">
   <img src="images/image1.jpg" class="img-responsive" alt="Responsive image">
</div>

But here is the picture:

Somehow window still need to scroll down as you can see, how can i fix this, to fit in screen?

Answer 1

Try this:

.img-responsive { background-size: 100%; }

OR

.img-responsive { background-size: cover; }

OR (based on revised question)

Add this to body:

overflow: hidden;

Answer 2

Instead of img tag, use background-image for fullscreen image.

<header>
  <div class="menu_area">...</div>
</header>


html, body, header {
    height: 100%;
}
header {
    background-image: url('images/image1.jpg');
    background-size: cover;
}