In general, there is a translucent shadow effect made by :: before on the background image of the element. When you change the width of the browser window, the background image adapts, and the background remains fixed in height, but in the full window due to background-size: include background less shadow in height (the image is larger than my display). How to make the image effect adapt with the shadow effect, and in the full window it was exactly on the image? Here is another example for better understanding: https://codepen.io/Black_Fire/pen/OgBrRO

header { background: url('../img/bg-header.jpg') no-repeat center top; -webkit-background-size: contain; background-size: contain; position: relative; height: 810px; text-align: center; } header::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 60, 0.671); content: ''; z-index: 100; }

    1 answer 1

    It is necessary to wrap the header in a special container that maintains the aspect ratio of your image. As an example, you selected the aspect ratio of 1500: 810, so the padding-bottom container has: 54%; (810/1500 = 0.54).

    https://codepen.io/anon/pen/MoPZQM

     <div class="ratio-container"> <header></header> </div> body { margin: 0; } .ratio-container { position: relative; } .ratio-container:after { content: ''; display: block; height: 0; width: 100%; /* 810:1500 = 54% */ padding-bottom: 54%; } .ratio-container > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; } header { background: url('http://lorempixel.com/1500/810/') no-repeat center top; -webkit-background-size: cover; background-size: cover; text-align: center; } header::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 60, 0.671); content: ''; z-index: 1; }
    • but the background is not adaptive - Black Fire
    • What does it mean - not adaptive? It adapts to the screen size. What is adaptability in your understanding? Show full picture? Then the task is much more difficult - you have to keep the aspect ratio of the background image. I did this. So what do you mean by adaptability? - KAGG Design
    • just showing the full picture, and what the other can be adaptability? When you cover the picture is cropped. - Black Fire
    • @BlackFire adaptability is adjusting the size of blocks when the screen width changes. Reducing the number of columns during the narrowing, well, etc. You want a different one: to fit the whole image into a block. OK. But in this case, you understand that the rigid task of height makes the task impracticable? How, interestingly, are you going to display the whole picture on a smartphone with a screen width of 320px at a fixed height of 810px? - KAGG Design
    • Yes, it is clear that the problem is in height, because I wrote here that someone might know some way around it. - Black Fire