<div id="description">
  <h2>Приклад</h2>
  <p>Використання функції <code>element()</code> для створення фону</p>
</div>

<div id="result">
  <div class="box">
    <p>Цей блок використовує елемент з ідентифікатором #myBackground1 як фон!</p>
  </div>
</div>

<div style="overflow:hidden; height:0;">
  <div id="myBackground1" class="background">
    <p class="rotated-text">
      Цей текст є частиною фону
    </p>
  </div>
</div>

#description {
  font-style: italic;
  text-align: left;
  line-height: 1.5;
  margin-bottom: 50px;
  padding: 12px 16px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

#result {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.box {
  padding: 5px;
  width: 200px;
  height: 200px;
  background: -moz-element(#myBackground1) no-repeat;
}

.background {
  width: 1024px;
  height: 1024px;
  background-image: linear-gradient(to right, red, orange, yellow, white);
}

.rotated-text {
  transform-origin: 0 0;
  transform: rotate(45deg);
  color: white;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.