I added a picture to the div , put the text on top, more blocks, but the picture itself is not displayed at full height. height: 100%; Does not help.

 .bg { color: #fff; display: block; text-align: center; background-image: url(/images/bg.jpg); background-position: center; background-color: #333; background-size: cover; padding-top: 9em; } 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid bg"> <div class="center-block"> <p class="text-uppercase" style="font-size:1.2em;color:rgba(255,255,255,0.7);position:relative;text-align:center">dukascopy is looking for world</p> <h1 class="text-uppercase" style="font-size:10em;font-weight:400;letter-spacing:0.1em">virtuosos</h1> <div class="panel"> <img src="images/Layer-221.png" style="align-self:center" alt=""> </div> </div> </div>

  • Look, in some chrome ctrl + shift + c, padding or margin can be set for some blocks, which prevents the image from stretching, well, you should display: block the image. by default it is inline and the height property does not work for such elements. - Taras M.
  • Can you upload an image to this site? - Vadim Ovchinnikov

1 answer 1

Try

 background-size: cover