<html>
  <head>
    <title>CSS url()</title>
  </head>
  <body>
    <div class="page">
      <div class="page__example">
        <div class="example-item example-item--1">
          <p class="example-item__text">Добавление фонового изображения с помощью <a href="https://tuhub.ru/refs/css/background-image" target="blank">свойства background-image</a> и функции <code>url():</code></p>
          <div class="example-item__content example-item__content--url"></div>
        </div>
        <div class="example-item example-item--2">
          <p class="example-item__text">Добавление фонового изображения с помощью data URI:</p>
          <div class="example-item__content example-item__content--data-uri"></div>
        </div>
      </div>
      <div class="page__copyright">
         Пример использования функции <a class="page__copyright-link" href="https://tuhub.ru/refs/css/url" target="blank">url() в CSS</a>.
      </div>
    </div>
  </body>
</html>
.example-item__content--url {
  background-image: url(https://tuhub.ru//themes/custom/tuhub/dist/images/social.png);
  background-repeat: no-repeat;
  height: 340px;
}

.example-item__content--data-uri {
  background-image: url(data:image/png;base64,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);
  background-repeat: no-repeat;
  height: 340px;
}

External CSS

  1. https://tuhub.ru/themes/custom/tuhub/dist/css/codepen.css

External JavaScript

This Pen doesn't use any external JavaScript resources.