Фонові зображення тіла зроблено легко

HTML

Приємною особливістю, яку ви знайдете на багатьох сайтах, є те, що центральна область вмісту, здається, перекриває сторінку тінню позаду. Насправді це досить простий спосіб зробити ваш блог приємним (або іншим веб-сайтом) за допомогою одного фонового зображення.

Як це робиться?

  1. З’ясуйте, наскільки широкий ваш вміст. Приклад: 750 пікс.
  2. Створіть зображення у своєму ілюстраційному додатку (я використовую Illustrator) ширше, ніж область вмісту. Приклад: 800 пікс.
  3. Встановіть фон зображення на фон, який ви хочете мати з кожного боку блогу.
  4. Додайте білу область над фоном.
  5. Нанесіть тінь на білу область, яка видається з будь-якої сторони області.
  6. Встановіть ширину області обрізання на 1 піксель у висоту. Це зробить зображення для завантаження гарним і компактним для швидкого відтворення.
  7. Виведіть зображення.

Ось як я побудував його за допомогою Illustrator (зверніть увагу, що у мене площа обрізання набагато вища ... це просто для того, щоб ви могли бачити, що я роблю):
Фон з Illustrator

Ось приклад того, як вигляд буде виглядати з фоновим зображенням:
Приклад фонового зображення

Ось як застосувати зображення за допомогою тегу стилю тіла у вашому CSS файлу.

фон: # B2B2B2 url ('images / bg.gif') центр повторення y;

Ось розбір тегу стилю фону:

  • # B2B2B2 - встановлює загальний колір фону сторінки. У цьому прикладі сірий колір відповідає сірому на фоновому зображенні.
  • url ('images / bg.gif') - встановлює фонове зображення, яке ви хотіли б використовувати.
  • repeat-y - встановлює повторення зображення на осі y. Тож фонове зображення буде повторюватися зверху вниз сторінки.
  • center - встановлює зображення в центрі сторінки.

Приємно і просто ... одне зображення, один тег стилю!

2 Коментарі

  1. 1
  2. 2

Що ви думаєте?

Цей сайт використовує Akismet для зменшення спаму. Дізнайтеся, як обробляються ваші дані коментарів.