<main>
  <article id="transform">
    <section>
      <h1>Hello world</h1>
    </section>
    <p>CSS Transform</p>
  </article>
  <article id="pseudo">
    <section>
      <h1>Hello world</h1>
    </section>
    <p>Pseudo element</p>
  </article>
  <article id="prerotate">
    <section>
      <h1>Hello world</h1>
    </section>
    <p>Pre-rotated image</p>
  </article>
</main>

#transform section {
  background-image: url("https://i.postimg.cc/Wp6DdFY1/pattern.png");
  background-size: 75px;
  rotate: -15deg;
}

#pseudo section {
  display: block;
  position: relative;
  overflow: none;
}

#pseudo section::after {
  content: "";
  inset: 0;
  position: absolute;
  background-image: url("https://i.postimg.cc/Wp6DdFY1/pattern.png");
  background-size: 75px;
  rotate: -15deg;
  z-index: -1;
}

#prerotate section {
  background-image: url("https://i.postimg.cc/PfMfDKPv/pattern-rot.png");
  background-size: 75px;
}

html,
body {
  margin: 0;
  bottom: 0;
  height: 100%;
  font-family: sans-serif;
}

main {
  display: grid;
  background-color: #f0dc003f;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
  min-height: 100%;
}
article {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
section {
  width: 300px;
  height: 175px;
  place-content: center;
  place-items: center;
  border: 1px solid grey;
  border-radius: 10px;
}
h1 {
  background-color: #ffffffaf;
  padding: 10px 20px;
  backdrop-filter: blur(3px);
  border-radius: 5px;
}
p {
  margin-block-start: 2em;
}