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>

Tailwind CSS

Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.

<div class="min-block-80 bg-[url(https://baselinelab.dev/baseline-wordmark.png)] bg-center bg-contain bg-no-repeat bg-scroll"></div>

CSS

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