Playground de background-image en CSS

Explora background-image con una URL editable y controles para position, size, repeat y attachment para visualizar el resultado al instante y copiar el CSS listo para usar.

HTML

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

Tailwind CSS

Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.

<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;
}