Как правильно использовать background-clip border-box

Question

Почему-то я не понимаю background-clip: border-box. Я могу сделать это, используя дополнительный родительский div, но предпочел бы этого не делать. Смотри:

#bgbox {
  width: 500px;
  height: 150px;
  background: blue;
}

#bgbox__inner {
  width: 300px;
  height: 150px;
  margin: auto;
  background-color: #BADA55;
  background-image: url(https://i.imgur.com/tBEjfgJ.png);
  background-clip: border-box;
}

<div id="bgbox">
  <div id="bgbox__inner"></div>
</div>

Фон также должен охватывать границы. Почему этого не происходит?

Answer 1

Немного теории: используя background-clip, вы можете управлять 3-мя способами фонового изображения внутри элемента

background-clip: content-box показывает только изображение bg в области содержимого игнорирует отступы и границы. background-clip: padding-box показывает bg изображение в области заполнения, игнорирует границу. background-clip: border-box показывает bg изображение в области границы, если цвет границы прозрачный.

В вашем случае для получения результата не следует использовать фоновое изображение в дочернем элементе. Давайте добавим его в родительский блок и сделаем его шириной 100%. Потому что это никак не повлияет на область поля или любую родительскую область от дочернего элемента.

    body {
      margin: 0;
      padding: 0; 
    }
    #bgbox {
      width: 100%;
      height: 150px;
      background: blue;
      background-image: url(https://i.imgur.com/tBEjfgJ.png);
      background-clip: padding-box; /*not nesessery if there is no border or padding*/
    }
    
    #bgbox__inner {
      width: 300px;
      height: 150px;
      margin: auto;
      background-color: #BADA55; /* can be removed */
      padding: 0 100px;
    }

<div id="bgbox">
      <div id="bgbox__inner">1</div>
    </div>