I have a picture on the entire width of the screen. How to make it so that when I reduce the screen, it does not lose its height, but only cut off to the width and make the text below should be located on the pictures. Everything is written on bootstrap 4

.img_back{ overflow: hidden; } .img_back img { position: relative; } 
 <!doctype html> <html lang="en"> <head> <title>Hello, world!</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="img_back"> <img src="images/img_back_header.png"> </div> <div class="container-fluid text-center"> <h1 class="dolg_h1">Взыскание долгов</h1> <p class="col-8 text_head mx-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> </body> </html>

    1 answer 1

    Option 1:

     .img_back{ overflow: hidden; position: relative; } .img_back:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.5); z-index: 1; } .img_back img { display: block; position: relative; top: 0%; left: 50%; transform: translateX(-50%); } .intro { position: relative; } .intro .container-fluid { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <div class="intro"> <div class="img_back"> <img src="https://hdwallsource.com/img/2014/5/images-26825-27541-hd-wallpapers.jpg"> </div> <div class="container-fluid text-center"> <h1 class="dolg_h1">Взыскание долгов</h1> <p class="col-8 text_head mx-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div>

    Option 2 with background (just in case):

     .intro:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.5); z-index: 1; } .intro { background: url(https://hdwallsource.com/img/2014/5/images-26825-27541-hd-wallpapers.jpg) top center no-repeat; min-height: 500px; height: 100%; position: relative; } .intro .container-fluid { position: relative; z-index: 2; } 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <div class="intro"> <div class="container-fluid text-center"> <h1 class="dolg_h1">Взыскание долгов</h1> <p class="col-8 text_head mx-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div>