Responsive background image - bootstrap grid - Scroll bar issue - css

Question

I want to create full screen background image within a bootstrap-grid so that it can be responsive.
I created a row and made it to 100% height so that it can fit the entire screen.
Added a 1024*768px resolution image , it perfectly appeared in background but with scroll bars.
I just want to get rid of the scroll bars so that it fit in screen. Here is my html
html,body,.container-fluid{
height:100%;
}
.row{
height:100%;
}
img {
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
width: 100vw;
height: 100vh;
}
<div class="container-fluid">
<div class="row" >
<img src="retail.jpg">
<div class="col-md-12">
</div>
</div>
</div>
Can someone help me ?

Answer 1

Here is something.
The picture is full screen, and the content is on bottom.
If you remove the content, the scrollbar wont appears.
Bootply: http://www.bootply.com/sFNwejI4ow
CSS:
html,body,.container-fluid{
height:100%;
}
.full{
height:100%;
}
img {
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 100%;
}
HTML:
<div class="container-fluid">
<div class="row full">
<img src="//placehold.it/640x480">
</div>
<div class="row">
<div class="col-md-12">
Custom content
</div>
</div>
</div>

Answer 2

This should by default remove both horizontal and vertical scrollbars:
<style type="text/css">
body {
overflow:hidden;
}
</style>
Sadly, this will also disable scrolling on page.
Alternatively, you can implement Fancy Scrolling. The scrollbar is thinner, looks better on page and has smooth scrolling.
Try this:
Here's the script: Link
Implementation:
First call the plugin on a container.
<script>
$(function() {
$( "#demo" ).customScroll();
});
</script>
Here's the CSS:
.phancy-scrollbar {
width: 5px;
border-radius: 4px;
top: 0;
position: absolute;
background: #ccc;
-moz-transition: opacity .2s;
-webkit-transition: opacity .2s;
-o-transition: opacity .2s;
-ms-transition: opacity .2s;
transition: opacity .2s;
-webkit-transition-delay: 1s;
opacity: 0;
}
.phancy-scroller .phancy-scrollbar:active, .phancy-scroller:hover .phancy-scrollbar {
opacity: 1;
-webkit-transition-delay: 0s;
}
.phancy-scrollbarbutton {
width: 100%;
border-radius: 4px;
top: 0;
position: absolute;
background-color: #999;
}
Hope this helps. Cheers!!

Answer 3

/* attributes overflow, background-size modified */
html,body,.container-fluid{
height:100%;
overflow: hidden; // -> newly added
}
.row{
height:100%;
}
img {
background-position: center center;
background-repeat: no-repeat;
background-size: contain cover; // modified here
width: 100vw;
height: 100vh;
}
plunker demo