0

I don't want the body have the background picture. I want to apply it to my main div. If I set the image height to 100%, it generates a scroll-bar. If I give it pixels, it wont be fully responsive, and have white parts when resizing browser. I want it to exactly fit on every screen sizes but without a scrollbar.

 <div class="another-div"></div>
 <div class="container-fluid main"></div>

 <style>
  .main{
  background-image: 
  url("templates/img/single/register_selector_background.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  overflow: hidden;
  }
</style>
Cyberstaker
  • 49
  • 7

1 Answers1

0

I am not sure I am understanding your question, but think this is what you are looking for

100% will only size to the content contained in the element.

Using vh will use the display height

html{
 overflow: hidden;
}
.main {
  background-image: url("https://baconmockup.com/300/250");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  overflow: hidden;
}
<div class="another-div">Some other content</div>
<div class="container-fluid main"></div>

<div class="other-div">Other Content that is hidden because the scroll bar is disabled on html</div>
happymacarts
  • 2,547
  • 1
  • 25
  • 33
  • If I use it, scrollbar's still appearing and Bootstrap can't make the the elements of the div expand downwards. – Cyberstaker Oct 30 '17 at 18:36