Let's say we have two divs:
<body>
<div class="no-repeat"><code>background-repeat: no-repeat</code></div>
<div class="repeat"><code></code></div>
</body>
they both have a background image, background-clip: border-box.
the second div exhibits the normal behavior of it's background-clip prop, with the background image extending beneath the border.
but for the first one with the addition of background-repeat: no-repeat the background image is clipped to the padding box.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
gap: 10px;
}
div {
width: 200px;
height: 200px;
border: 10px dashed rgba(201, 24, 24, 0.894);
padding: 10px;
background-image: linear-gradient(blue, blue);
background-clip: border-box;
color: white;
}
.no-repeat {
background-repeat: no-repeat;
}
.repeat {
background-repeat: repeat;
}<body>
<div class="no-repeat"><code>background-repeat: no-repeat</code></div>
<div class="repeat"><code>background-repeat: repeat</code></div>
</body>Why does background-repeat affect background-clip ?
