Почему «фон» — не только про дизайн

Если в 1994 году «фоном» для принятия части I ГК РФ стали радикальные экономические преобразования, то в 2026 году мы можем использовать буквальный фон — изображения, градиенты и паттерны — чтобы визуально структурировать материал о кодексе. Каждый блок страницы будет символизировать один из этапов развития российского гражданского законодательства.

Разметка: делим страницу на блоки

<main class="gk2026">
 <section id="preamble"><h2>Преамбула</h2>...</section>
 <section id="soviet"><h2>1964–1991</h2>...</section>
 <section id="modern"><h2>1994–н.в.</h2>...</section>
 <section id="future"><h2>2026 и далее</h2>...</section>
</main>

CSS: задаём фон каждому блоку

Картинка на весь экран

Для главного героя страницы, блока «Преамбула» — используем фотографию первого издания ГК РФ 1994 года, растянутую на весь viewport.

#preamble {
 background: url("gk1994-cover.jpg") center/cover no-repeat fixed;
 color: #fff;
 min-height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
}

Секция «1964–1991»: градиент «советского» серого

Кодекс 1964 года регулировал отношения в условиях плановой экономики. Для визуального соответствия выберем градиент из серого в голубой, символизирующий индустриальную эпоху и надежду на реформы.

#soviet {
 background: linear-gradient(135deg,#6e7f80 0%, #a9b7c6 100%);
 color: #1a1a1a;
}

Современный блок (1994–н.в.): паттерн «правовой лабиринт»

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

#modern {
 background: #fff url("legal-grid.svg") repeat;
 background-size: 60px 60px;
 background-blend-mode: multiply;
 color: #222;
}

Будущее: анимированный градиент

Для «перспектив-2026» используем анимированный градиент, который плавно меняет цвета при наведении мыши, символизируя постоянное развитие законодательства.

@keyframes futureShift {
 0% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
 100% { background-position: 0% 50%; }
}

#future {
 background: linear-gradient(-45deg, #0f2027, #203a43, #2c5364);
 background-size: 400% 400%;
 color: #fff;
 transition: transform .4s;
}

#future:hover {
 animation: futureShift 5s ease infinite;
 transform: scale(1.01);
}

Как убрать лишний белый фон у прозрачного PNG

Если вы добавляете логотип Минюста России (в формате PNG с прозрачным фоном) и видите белую рамку вокруг изображения — используйте CSS-свойство mix-blend-mode:

.logo {
 mix-blend-mode: multiply; /* или screen, зависит от палитры */
}

Полезные мелочи

• Резиновый фон. Чтобы картинка заполняла блок по вертикали и горизонтали, добавьте background-size: cover; и background-position: center;.
• Кнопка «Сменить тему». Можно реализовать через JavaScript, меняя CSS-переменную --bg-color при клике.
• Фон под текстом без заливки всей строки. В C-приложении (Windows.h) используйте SetConsoleTextAttribute с флагом BACKGROUND_BLUE только для символов, а не для всей строки.

Таким образом, «фон» оказывается не только эстетическим элементом, но и носителем смысла: каждая секция нашей страницы рассказывает о вехах становления российского гражданского права. Применяя разные CSS-техники — от linear-gradient до @keyframes, — мы визуализировали 30-летний путь Гражданского кодекса Российской Федерации и подготовили почву для следующих юбилеев.

С юбилеем, ГК РФ! И с наступающим днём гражданского права 2026.