Фонові зображення тіла зроблено легко
Приємною особливістю, яку ви знайдете на багатьох сайтах, є те, що центральна область вмісту, здається, перекриває сторінку тінню позаду. Насправді це досить простий спосіб зробити ваш блог приємним (або іншим веб-сайтом) за допомогою одного фонового зображення.
Як це робиться?
- З’ясуйте, наскільки широкий ваш вміст. Приклад: 750 пікс.
- Створіть зображення у своєму ілюстраційному додатку (я використовую Illustrator) ширше, ніж область вмісту. Приклад: 800 пікс.
- Встановіть фон зображення на фон, який ви хочете мати з кожного боку блогу.
- Додайте білу область над фоном.
- Нанесіть тінь на білу область, яка видається з будь-якої сторони області.
- Встановіть ширину області обрізання на 1 піксель у висоту. Це зробить зображення для завантаження гарним і компактним для швидкого відтворення.
- Виведіть зображення.
Ось як я побудував його за допомогою Illustrator (зверніть увагу, що у мене площа обрізання набагато вища ... це просто для того, щоб ви могли бачити, що я роблю):
Ось приклад того, як вигляд буде виглядати з фоновим зображенням:
Ось як застосувати зображення за допомогою тегу стилю тіла у вашому
CSS файлу.фон: # B2B2B2 url ('images / bg.gif') центр повторення y;
Ось розбір тегу стилю фону:
- # B2B2B2 - встановлює загальний колір фону сторінки. У цьому прикладі сірий колір відповідає сірому на фоновому зображенні.
- url ('images / bg.gif') - встановлює фонове зображення, яке ви хотіли б використовувати.
- repeat-y - встановлює повторення зображення на осі y. Тож фонове зображення буде повторюватися зверху вниз сторінки.
- center - встановлює зображення в центрі сторінки.
Приємно і просто ... одне зображення, один тег стилю!