CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3responsive-design
ani
ani

Reputation: 516

Responsive background image - bootstrap grid - Scroll bar issue

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 ?

Upvotes: 2

Views: 2104

Answers (3)

sangeeth
sangeeth

Reputation: 37

/* 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

Upvotes: 0

user7466693
user7466693

Reputation:

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!!

Upvotes: 0

BENARD Patrick
BENARD Patrick

Reputation: 30995

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>

Upvotes: 1

Related Questions