I have a picture of 2000x1333 in size and I need to put it on bg so that it is completely on the block. When I try, it turns out something like that: (red border - block size) file

CSS:

#header { background: #fff url('../img/bg1.png') center no-repeat; background-size: auto; max-width: 1920px; height: 1080px; border-top: 11px solid #204055; border: 1px solid red; }
  • background-size: cover | contain | 100%; - HamSter 5:59 pm
  • contain: Scales the image while maintaining the proportions so that the whole picture fits inside the block. A little not what you need. - Ep1demic
  • OK, then how can I get the block size to be set? - I. Gursky
  • if you need the picture to not shrink or stretch over the block losing its appearance - set the width and height of the block like the picture, but this is a dead end, set the block size as it is and fit the picture along the block as I said. Or do not use the background, and set the picture position: absolute, and the block - position: relative. (Plus picture settings of course: width: 100%; top: 0, left: 0, etc.). - Ep1demic
  • I used the picture (not bg) and now it does not scale, it’s not adaptive; C - I. Gursky

2 answers 2

Use:

 background-size:100%;

or

 background-size: cover;

    As suggested

     background-size: cover;

    You can also add

     background-position: center;