When I remove the screen (check how it will look on the big screen), the picture is truncated. I set it up with a div div and gave it height, it disappears without height. Or just throw it img?

enter image description here

CSS code:

.head { margin-top: 20px; width: 100%; height: 530px; background: url(img/head.jpg)no-repeat ; background-size: cover; }

    1 answer 1

    The fact is that background-size: cover; fills a block using the dimensions of the viewport , not the dimensions of the block in which it is located. Replace background-size: cover; on background-size: contain :

     .head { background: url("https://mobidevices.ru/images/2017/01/Nintendo-Switch-1.jpg") no-repeat 50% / contain; margin-top: 20px; width: 100%; height: 530px; } 
     <div class="head"></div>

    Or make the height of the block equal to the entire height of the viewport :

     .head { background: url("https://mobidevices.ru/images/2017/01/Nintendo-Switch-1.jpg") no-repeat 50% / cover; margin-top: 20px; width: 100%; height: 100vh; } 
     <div class="head"></div>

    • it helped, but now not for the whole page, here is the html code, what could be wrong here? (<div class = "row"> <div class = "col-md-12"> <div class = "head"> </ div> <div class = "container"> <! --- <img class = "head" src = "img / head.jpg" alt = ""> ---> </ div> </ div> </ div> - AG
    • The @AG picture can be either completely filled with a block or completely placed in this block without losing it. Fill it full and without cutting it, if the block does not have proportional dimensions, you cannot physically change it. - Vadizar
    • did not understand anything - AG
    • Now when I do less, the background becomes small and the text of the norms, and between them there is a huge space - AG