There is such a header with an adaptive background:

header { background: url('../img/bg.jpg'); background-size: cover; background-position: 100% 100%; background-color: #464646; padding-top: 30px; min-width: 100%; }

But when reducing the resolution, it is necessary that the picture be in its entire width and height. That is, not part of it, but completely. How to do it? If anything, I build on the bootstrap grid.

  • background-size: cover; Proportions will not be true. And if with preservation of proportions background-size: contain; but in general, read webref.ru/css/background-size - user190134
  • In order for background-size: cover to scale the background image, the height of the block should also change. - pepel_xD
  • one
    background-size: 100% 100%; - HamSter

1 answer 1

If you use the picture as a background in the header use:

 header{ background:url(path_to_your_image) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100px; }

Example: https://jsfiddle.net/NikitaSmith/uz2n1r3p/4/

If you want to use the picture inside the block so that it is adaptive: HTML:

 <img src="path/to/your/image" alt=""> </header>

CSS:

 #background { position: fixed; top: 0; left: 0; /* Preserve aspet ratio */ min-width: 100%; height: 200px; }

Example: https://jsfiddle.net/NikitaSmith/gzy4yngh/2/