Mike Mike - 6 months ago 18
CSS Question

background no-repeat sets the background-clip property to padding-box?

We have simple list with three list items. JSFiddle.

First li background property set to:

background: url(http://url-here.png) no-repeat 0 50% / 15px 15px;


no-repeat is set, but background-clip is omitted.

Second li has background where both no-repeat and border-box set:

background: url(http://url-here.png) no-repeat 0 50% / 15px 15px border-box;


and third li similar to first li, but background-clip set manually:

background: url(http://url-here.png) no-repeat 0 50% / 15px 15px;
background-clip: border-box;


Keeping in mind that default value for background-clip is "border-box", I assume that setting the value for second and third li is redundant, but only second li display the background image as it should.

enter image description here

Tested in Opera v. 37.0.2178.54 and Google Chrome v. 50.0.2661.102 m

Please help me to figure out the way it's working. Thank you!

Answer

No the background-repeat does not affect the background-clip property in any way. The difference that you are seeing in the second li is due to a different reason. In the short-hand property when we provide only one box value, both background-clip and background-origin get the same value.

From the W3C Spec:

If one value is present then it sets both ‘background-origin’ and ‘background-clip’ to that value.

So, your second li gets background-origin: border-box whereas for the other two it gets set with the default value which is padding-box.

background-origin is the property that specifies from where the background should start. Since the first and third li get the background-origin set as padding-box, their background is set within the padding box area (inside the border).

If same background-origin is set for all three li then they will display the same way irrespective of the background-repeat setting.

ul {
  list-style-type: none;
}
li {
  border: 10px solid rgba(0, 0, 0, 0.60);
  padding-left: 20px;
  margin-bottom: 10px;
}
.no-repeat {
  background: url(http://postcrossing-ua.com/static/pybb/smiles/D83DDE03.png) no-repeat 0 50% / 15px 15px;
  background-origin: border-box;
}
.no-repeat-border-box {
  background: url(http://postcrossing-ua.com/static/pybb/smiles/D83DDE03.png) no-repeat 0 50% / 15px 15px border-box;
}
.border-box {
  background-clip: border-box;
  background-origin: border-box;
}
<ul>
  <li class="no-repeat">White</li>
  <li class="no-repeat-border-box">Black</li>
  <li class="no-repeat border-box">Red</li>
</ul>