Background-clip: border-box behaves the same as its value - padding-box

Question

I play with a property background-clipto see the effect of its three values.

Just a few minutes ago, the value border-boxstopped displaying the image as it should. That is, he started the image on the edge of the outer border, but now he starts it inside the border, but at the end padding-box.

Please see the code here on github and the JS script here .

In my browser, they all look like this:

As you can see, the first field that matters border-boxfor the property background-clipdoes not display the image at the edge of the outer border. He behaves exactly the same as padding-box.

The code below is for your convenience.

div {
  margin: 50px;
  border-style: solid;
  border-color: rgba(255, 255, 0, 0.7);
  border-width: 50px;
  padding: 20px;
  width: 200px;
  height: 300px;
  float: left;
  background-image: url("https://raw.githubusercontent.com/Sathyaish/Practice/master/CSS/images/roses-small.gif");
  background-repeat: no-repeat;
  background-color: rgba(120, 210, 180, 0.65);
  color: white;
  font-size: 2em;
}

.default {
  background-clip: border-box;
}

.paddingBox {
  background-clip: padding-box;
}

.contentBox {
  background-clip: content-box;
}

<div class="default">background-clip: border-box</div>
<div class="paddingBox">background-clip: padding-box</div>
<div class="contentBox">background-clip: content-box</div>

Run codeHide result

, background-repeat: no-repeat, background-clip , . . .

div {
  .. 
  /* background-repeat: no-repeat; */
}

W3C CSS 3 background-clip background-repeat.

IP : .

Answer 1

MSDN:

CSS- background-clip , , , .

, , background-repeat: no-repeat. - , background-origin -property, padding-box.

background-origin background-clip, , .

div {
  margin: 50px;
  border-style: solid;
  border-color: rgba(255, 255, 0, 0.7);
  border-width: 50px;
  padding: 20px;
  width: 200px;
  height: 300px;
  float: left;
  background-image: url("https://raw.githubusercontent.com/Sathyaish/Practice/master/CSS/images/roses-small.gif");
  background-repeat: no-repeat;
  background-color: rgba(120, 210, 180, 0.65);
  color: white;
  font-size: 2em;
}

.default {
  background-clip: border-box;
  background-origin: border-box;
}

.paddingBox {
  background-clip: padding-box;
  background-origin: padding-box;
}

.contentBox {
  background-clip: content-box;
  background-origin: content-box;
}

<div class="default">background-clip: border-box</div>
<div class="paddingBox">background-clip: padding-box</div>
<div class="contentBox">background-clip: content-box</div>

Hide result