background-image позволяет добавить изображение в качестве фона для выбранного элемента. Фоновое изображение может быть любого типа и повторяться или масштабироваться в зависимости от настроек.

Синтаксис

selector {
  background-image: url("image.jpg");
}

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Значения

  • url('путь_к_изображению') — указывает путь к изображению. Вы можете указать относительный путь к изображению на вашем сервере или абсолютный URL для изображения в интернете.
  • none — значение по умолчанию, где нет фона. Если не хотите использовать изображение в качестве фона, вы можете установить background-image: none;.
  • linear-gradient(), radial-gradient(), repeating-linear-gradient(), repeating-radial-gradient() — создают градиент фона без использования изображений. Можно определить цветовую палитру и ориентацию градиента.

Повторное изображение

background-repeat: repeat; — значение по умолчанию, изображение повторяется по горизонтали и вертикали. Изображение будет заполнять фон элемента, повторяясь при необходимости.

background-repeat: repeat-x; — повторяется только по горизонтали.

background-repeat: repeat-y; — повторяется только по вертикали.

background-repeat: no-repeat; — отображается только один раз без повторения.

Размер изображения

background-size: auto; — отображается в своём естественном размере.

background-size: cover; — масштабируется так, чтобы полностью заполнить фон элемента, возможно, обрезая его.

background-size: contain; — масштабируется так, чтобы полностью поместиться в фон элемента без искажений. Белые полосы могут появиться по краям фона, если пропорции изображения и фона не совпадают.

Наследование

Свойство background-image не наследуется дочерними элементами. Каждый элемент должен самостоятельно задавать фоновое изображение.

Примеры использования

Добавление изображения на фон определённого элемента:

<div class="container">
  <h1>Здесь паучок</h1>
</div>
.container {
  width: 600px;
  height: 300px;
  background-image: url('01.jpg');
  background-size: cover; /* размер одного повторяющегося изображения */
}

h1 {
  color: white;
  text-align: left;
  padding: 100px;
}

Добавление повторяющегося изображения на фон элемента

<div class="container">
  <h1>Здесь паучок</h1>
</div>
.container {
  width: 600px;
  height: 300px;
  background-image: url('01.jpg');
  background-repeat: repeat;
}

h1 {
  color: white;
  text-align: left;
  padding: 100px;
}

Добавление градиента на фон

  <div class="container">
    <h1>Здесь нет паучка</h1>
  </div>
.container {
 width: 600px;
 height: 300px;
 background-image: linear-gradient(to right, #E2BCBB, #E4514A);
}

h1 {
  color: black;
  text-align: left;
  padding: 100px;
}

Нюансы использования

  • Фоновые картинки не будут автоматически масштабироваться под размеры родительского элемента. Если размеры картинки и родительского элемента не совпадают, то картинка обрежется или начнёт повторяться.
  • Если задать цвет фона и background-image для одного элемента, то картинка будет отображаться поверх цвета фона.

⭐ Поддержка браузерами свойства background-image

Материалы по теме


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Игры с бесконечностью, или зачем нам infinity в CSS

Игры с бесконечностью, или зачем нам infinity в CSS

💡 Это перевод статьи Will Boyd из блога CodersBlock. Оригинал: https://codersblock.com/blog/playing-with-infinity-in-css/

В CSS есть константа Infinity. Когда я только узнал об этом, ко мне в голову сразу пришла гора абсурдных идей, как это использовать, среди которых была и пара неплохих.

Ну, мне так кажется.

Кстати, если что, infinity можно использовать только внутри calc(). Ну, поехали!

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
CSS
  • 5 марта 2024
Межстрочное расстояние в CSS. Свойство line-height

Межстрочное расстояние в CSS. Свойство line-height

line-height задает интерлиньяж, то есть расстояние между базовыми линиями соседних строк текста. Это свойство может влиять на читабельность текста и его восприятие.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Значение line-height можно указывать как в абсолютных единицах (например, px, pt), так и в относительных (em, %, без единицы измерения). Рекомендуется использовать относительные единицы, так как они позволяют сохранить масштабируемость и адаптивность текста.

Примеры использования:

  • line-height: 1.2; — относительное значение, не зависящее от размера шрифта.
  • line-height: 20px; — абсолютное значение, фиксированный размер интерлиньяжа.
  • line-height: 1.5em; — относительное значение, зависящее от размера шрифта элемента.
Читать дальше
CSS
  • 4 марта 2024
Свойство text-align

Свойство text-align

Свойство text-align в CSS используется для определения горизонтального выравнивания текста внутри элемента.

🚀 Сегодня вам бесплатно доступны тренажёры по HTML и CSS.

Свойство text-align может принимать несколько значений, включая:

  • left — выравнивает текст по левому краю контейнера.
  • right — выравнивает текст по правому краю контейнера.
  • center — центрирует текст внутри контейнера.
  • justify — выравнивание текста по ширине. Оба края текста (левый и правый) будут выровнены по краям контейнера.

Пример использования свойства text-align:

p {
  text-align: center;
}

Этот код выравнивает текст внутри всех параграфов (<p>) по центру.

Для практики и улучшения своих навыков работы с text-align и другими свойствами CSS, рекомендуем пройти тренажёр. Он поможет лучше понять, как работает выравнивание текста, и даст возможность попрактиковаться в использовании различных значений свойства text-align.

CSS
  • 4 марта 2024
CSS-препроцессоры в 2024. Большой обзор

CSS-препроцессоры в 2024. Большой обзор

Препроцессоры позволяют разработчикам расширить возможности CSS. Например, они добавляют селекторы наследования, вложенные правила, примеси и многие другие.

Одна из важных задач препроцессоров — упростить и ускорить процесс разработки и поддержку стилей в проекте. В обзоре рассмотрим наиболее популярные препроцессоры в 2024 году и расскажем, как выбрать подходящий.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
CSS
  • 29 февраля 2024
Как прятать

Как прятать

Когда display: none, а когда visibility: hidden? — спрашивает нас RedFox. Зависит от того, что вы пытаетесь сделать. Есть и другие варианты как спрятать блок и даже специальный атрибут. Давайте разберёмся!

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Если вам приходится что-то прятать, то лучше всего это вообще убрать: сайт легче, код чище... ошибок меньше! Но если вам нужно, чтобы оно там пряталось до поры, а потом кому-то пригодилось — это другое дело. Здесь важно не ошибиться с выбором способа.

Читать дальше
CSS
  • 28 февраля 2024
Новое в 2023 — text-wrap: balance

Новое в 2023 — text-wrap: balance

В 2023 в CSS появилось любопытное свойство text-wrap со значением balance. Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.

h1 {
  text-wrap: balance;
}

Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Вот пример заголовка <h1>text-wrap: balance и без него.

На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.

CSS
  • 13 ноября 2023
Знакомство с CSS

Знакомство с CSS

После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».

CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
CSS
  • 1 ноября 2023
Увеличение ссылки при наведении

Увеличение ссылки при наведении

Задача: плавно увеличить ссылку при наведении.

Решение:

a {
  display: inline-block;
  transition: transform 0.3s ease;
}
a:hover {
  transform: scale(1.2);
}

Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах <a> на темно-красный, а свойство text-decoration: none; убирает подчеркивание.

Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2), которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

Демо:

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
CSS
  • 13 октября 2023
WOFF больше не нужен

WOFF больше не нужен

Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face, включавшего TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face:

@font-face {

  font-family: "Open Sans";
  src: url("opensans.woff2") format('woff2');

}

Остался всего один формат. Просто, скажите?

Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

  • IE 11, 10, 9, 8, 7, …
  • Chrome 4–35
  • Edge 12 и 13
  • Safari 3–9.1
  • Firefox 2–38
  • Opera 22 и ниже
  • Android 4.4.4 KitKat и ниже (а это <0.5% устройств на Android)
  • Safari на iOS 3.2–9.3

Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.

С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

CSS
  • 23 сентября 2023
Трясём пароль с помощью CSS

Трясём пароль с помощью CSS

Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Вот что получится в итоге:

Читать дальше
CSS
  • 7 сентября 2023