0

I'm making a one-pager from an existing bootstrap theme that has a background image in the section with the background-size: cover selector applied to the header.

Currently, the image only covers about 80-90% of the screen vertically on most browsers, pcs I've tried it on. The bottom is filled with a white background, that of the following section below. I would like the image to occupy the entire vertical view when you first load the page.

I can manually edit the height by pixel to make it work for a given monitor/browser, but is there any way to have it dynamically resize based on the height of the view for each browser, machine, etc.? Or am I stuck with this "white space" problem.

Example in chrome on this PC: https://i.stack.imgur.com/yqMHp.jpg

react
  • 53
  • 1
  • 3

3 Answers3

1

Give it height:100vh;

html,body{
  width:100%;
  height:100%;
  margin:0;
  padding:0:
}
.imageH{
  width:100%;
  margin:0;
  padding:0;
  background-image:url("http://images.financialexpress.com/2015/12/Lead-image.jpg");
  background-size:cover;
  background-position:center;
  height:100vh;
}
<div class="imageH"></div>

And if you have a navbar before this div say of height 50px then use calc(100vh - 50px)

html,body{
  width:100%;
  height:100%;
  margin:0;
  padding:0:
}
.navbar{
  width:100%;
  margin:0;
  padding:0;
  background-color:green;
  height:50px;
}
.imageH{
  width:100%;
  margin:0;
  padding:0;
  background-image:url("http://images.financialexpress.com/2015/12/Lead-image.jpg");
  background-size:cover;
  background-position:center;
  height:calc(100vh - 50px);
}
<div class="navbar">navbar comes here</div>
<div class="imageH"></div>
ab29007
  • 7,611
  • 2
  • 17
  • 43
0

hi just give this code 

  body{background: url(images/bg.jpg) no-repeat center center fixed; 
         -webkit-background-size: cover;
         -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;}

you can see this as a example https://blackrockdigital.github.io/startbootstrap-the-big-picture/

thanks

0

this problem is occur due to your background size.you have to adjust your background image size. background-size:cover; or use this background-size:100% 100%; this will fill all white spaces that is in your background image at botoom.

Asad Iqbal
  • 1