Дата публикации: 19 апреля 2026 г.

Зачем «переобувать» фон?

Фон — это первое, что замечает пользователь. Верно подобранное оформление:

• улучшает читаемость контента;
• усиливает фирменный стиль;
• создаёт нужное настроение, задаёт контекст;
• оптимизирует восприятие на разных устройствах.

В этой статье мы разберёмся, как «реновировать» фон на любых типах блоков: от <body> до отдельных ячеек таблицы и даже <canvas>.

База: 100 % по ширине, но не по высоте

Частая задача — сделать изображение 100 % ширины, но не растягивать по высоте. Если блок вываливается за исходный размер картинки, нужно просто повторять её вертикально.

CSS-решение

.banner {
 background-image: url('bg.jpg');
 background-repeat: repeat-y; /* повтор по вертикали /
 background-size: 100% auto; / 100 % ширина, пропорциональная высота */
}

Что происходит:

• background-size: 100% auto растягивает картинку на всю ширину блока, сохраняя пропорции.
• repeat-y «доклеивает» фон вниз, если контента больше, чем высота изображения.

Разбиваем страницу на блоки, каждому свой фон

Каждый раздел сайта может иметь собственный фон: тёмный для геро-секции, светлый для текста и т. д.

<header class="hero">...</header>
<section class="features">...</section>
<footer class="footer">...</footer>

CSS-фоны

.hero { background: url('hero.jpg') center/cover no-repeat #111; }
.features{ background: linear-gradient(135deg,#fff 0,#f5f5f5 100%); }
.footer { background-color: #222; color:#eee; }

Ключевые приёмы:

1. Используем короткую запись background, где первым идёт изображение, потом позиция, потом повтор.
2. Добавляем фон-запас (#111) на случай, если картинка не загрузится.

Парадокс прозрачного canvas

Нужно, чтобы <canvas>:

• был прозрачным (видны кнопки под ним);
• одновременно рисовался (взаимодействие мышью).

<canvas id="draw" width="600" height="400"></canvas>
<button style="position:absolute;left:20px;top:20px;">Кнопка под canvas</button>

JavaScript

const cvs = document.getElementById('draw');
const ctx = cvs.getContext('2d');

// 1. Делаем прозрачный фон
ctx.clearRect(0, 0, cvs.width, cvs.height);

// 2. Рисуем линии
cvs.addEventListener('mousemove', e => {
 ctx.lineTo(e.offsetX, e.offsetY);
 ctx.stroke;
});

Важно:

• Не задавать фон CSS-свойством background, иначе canvas перестанет быть прозрачным.
• Держать canvas position:relative или absolute, чтобы кнопки не съехали.

Картинка на всё окно: почему «body background: url(…)» не работал

Код, который не помог:

body {
 background: url(img.jpg); /* не хватает size /
}

Рабочий вариант

 height: 100%; / без этого body = 0 px /
}

body {
 background: url('img.jpg') no-repeat center center;
 background-size: cover; / растягивает, чтобы закрыть весь экран */
 background-attachment: fixed;
}

Разбор:

1. background-size: cover масштабирует картинку так, чтобы не было пустот.
2. background-attachment: fixed фиксирует фон при прокрутке.

Цвет текста кнопки «встроить» в фоновое изображение

Когда кнопка расположена поверх фото, текст должен читаться на любом участке изображения.

Приём: наложение полупрозрачного градиента

;btn {
 background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
 url('pic.jpg') center/cover;
 color: #fff; /* контрастный цвет */
 padding: .75rem 1.5rem;
 border: none;
}

Такой «тёмный вуаль» гарантирует, что белый текст будет виден даже на светлых участках фото.

Смещение фона при наведении на ссылку

Эффект «парallax» в миниатюре — двигаем background-position.

a.hover-shift {
 display: inline-block;
 padding: .5rem 1rem;
 background: url('pattern.svg') - 0 repeat;
 transition: background-position .3s ease;
}

a.hover-shift:hover {
 background-position: 10px 0; /* сдвиг на 10 px вправо */
}

Убираем белый фон вокруг точки SeekBar (Android)

Вопрос из мира Android-разработки:

• Используем android:progressDrawable и android:thumb без фона.
• Добавляем android:background="@android:color/transparent" у самого SeekBar.

Дополнительный фон у body: когда нужен «двойной слой»

Иногда требуется:

1. Верхний фон — фиксированная текстура.
2. Нижний фон — градиент или цвет.

body {
 background:
 url('texture.png') repeat, /* верхний слой /
 linear-gradient(135deg, #4f4f4f 0%, #000 100%); / нижний */
}

Порядок слоёв: первый аргумент — сверху, последний — снизу.

Подсветка строки таблицы из <div>-элементов

Задача: при клике менять фон только строки, не затрагивая отступы между ячейками.

<div class="table">
 <div class="row" data-row="1">
 <div class="cell">Ячейка 1</div>
 <div class="cell">Ячейка 2</div>
 </div>

</div>

CSS

.row { display: flex; margin: .25rem 0; }
.cell{ padding: .5rem; }
.row.active .cell { background:#ffe082; }

document.querySelectorAll('.row').forEach(r =>
 r.addEventListener('click',  => {
 document.querySelectorAll('.row').forEach(x=>x.classList.remove('active'));
 r.classList.add('active');
 })
);

Таким образом подсветка «сидит» строго под текстом, не захватывая межстрочные расстояния.

Мини-чек-лист «Реновации»

1. Определить, нужен ли повтор (repeat) фона.
2. Установить размеры (cover, contain, 100% auto).
3. Добавить запасной цвет, если картинка не загрузится.
4. Проверить контрастность текста перед фоном.
5. Для кликабельных блоков использовать плавные переходы (transition).
6. Протестировать на мобильных и ретина-дисплеях.

«Реновация» фона — не просто красота, а полноценный UX-инструмент. Правильно выбранные размер, повтор, прозрачность и слои превращают обычную страницу в запоминающийся интерфейс. Экспериментируйте, но не забывайте о доступности и скорости загрузки!