JSFiddle - React, Tailwind, and code Playground

Background-origin vs background-clip experiment.

by nilloc

HTML

<div class="padded">
  Lorem ipsum dolar sit amet.
</div>

SCSS

.padded {
    padding: 20px 10px 5px 100px;
    color:white;
    background-image:url(https://www.toptal.com/designers/subtlepatterns/patterns/carbon_fibre.png);
    background-repeat: no-repeat;
    background-repeat: repeat-x; // it still starts at the origin but...
    border: 1px solid #bada55;
    height: 60px;
    background-origin: content-box; // repeat goes all the way across no matter what :(
    
    background-clip: content-box; // fixes the repeat, but doesn't scale well
    // in hindsight I might be able to clip the other images with: 
    // background-clip: padding-box and making sure they all fit in side an ivisible border (might not even need the invisible border...)
    position: relative;
    
    &::before {
      content: "";
      display: block;
      position: absolute;
      background-color: red;
      height: 40px;
      width: 80px;
      top: 0;
      left: 0;
  }
}