CSS background-image playground

Explore background-image with an editable URL field and controls for position, size, repeat, and attachment to preview the result instantly and copy production-ready CSS.

HTML

<div class="background-image"></div>

CSS

.background-image {
  min-block-size: 20rem;
  background: url("https://baselinelab.dev/baseline-wordmark.png") center / contain no-repeat scroll;
}